<h1>linear() easing function</h1>

<pre>
<code>animation-timing-function: linear(
  0, 0.06, 0.25, 0.56, 1, 0.81, 0.75, 0.81, 1, 0.94, 1 91%, 0.98, 1
);</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">
<!-- linear(
  0, 0.06, 0.25, 0.56, 1, 0.81, 0.75, 0.81, 1, 0.94, 1 91%, 0.98, 1
); -->
<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" />

  <path d="M 0 1,0.09 0.94,0.18 0.75,0.27 0.44,0.36 0,0.45 0.19,0.55 0.25,0.64 0.19,0.73 0,0.82 0.06,0.91 0,0.95 0.02,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 linear(0, 0.06, 0.25, 0.56, 1, 0.81, 0.75, 0.81, 1, 0.94, 1 91%, 0.98, 1) 0s infinite normal bounce;
}

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