<h1>ease-in-out easing</h1>

<pre>
<code>animation-timing-function: ease-in-out;</code>
<code>animation-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);</code>
</pre>

<main>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.2 -0.2 1.4 1.4" preserveAspectRatio="xMidYMid" width="400" height="400">
<defs><style>
line, path, circle {
  stroke: #000;
  stroke-width: 0.01;
  stroke-linecap: round;
  fill: none;
}

line.control {
  stroke: #999;
  stroke-dasharray: 0.03,0.03;
}

path {
  stroke: #c00;
  stroke-width: 0.04;
}

circle {
  stroke: #d00;
  fill: #fff;
}

text {
  font-family: sans-serif;
  font-size: 0.1px;
  fill: #555;
}
</style></defs>

  <line x1="0" y1="0" x2="0" y2="1" />
  <line x1="0" y1="1" x2="1" y2="1" />

  <circle cx="0.42" cy="1.0" r="0.05" />
  <line x1="0.42" y1="1.0" x2="0" y2="1" class="control" />

  <circle cx="0.58" cy="0" r="0.05" />
  <line x1="0.58" y1="0.0" x2="1" y2="0" class="control" />

  <path d="M0,1 C0.42,1 0.58,0.0 1,0" />

  <text x="0" y="1.03" text-anchor="start" dominant-baseline="hanging">TIME</text>
  <text x="1" y="1.03" text-anchor="end" dominant-baseline="hanging">1</text>
  <text x="-1" y="-0.03" text-anchor="start" transform="rotate(-90)">PROGRESS</text>
  <text x="-0.02" y="0" text-anchor="end" dominant-baseline="hanging">1</text>

</svg>
  
<div id="ball"><div>
 
</main>

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

main {
  display: flex;
}

pre {
  font-family: monospace;
  font-size: 1.4em;
}

#ball {
  width: 100px;
  height: 100px;
  background-color: #009;
  clip-path: circle();
  animation: 1.5s ease-in-out 0s infinite normal bounce;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  20% { transform: translateY(0); }
  80% { transform: translateY(300px); }
  100% { transform: translateY(300px); }
}