<h1>cubic-bezier easing</h1>

<pre>
<code>animation-timing-function: cubic-bezier(0.7, 1.9, 0.6, 0.4);</code>
</pre>

<main>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.2 -1 1.4 2.2" preserveAspectRatio="xMidYMid" width="400" height="600">
<!-- cubic-bezier(0.7, 1.9, 0.6, 0.4) -->
<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.7" cy="-0.9" r="0.05" />
  <line x1="0.7" y1="-0.9" x2="0" y2="1" class="control" />

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

  <path d="M0,1 C0.7,-0.9 0.6,0.6 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: 2s cubic-bezier(0.7, 1.9, 0.6, 0.4) 0s infinite normal bounce;
}

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