Animation Timing Function Gets Applied Per-Keyframe in CSS Example

https://www.bennadel.com/blog/3885-animation-timing-functions-get-applied-per-keyframe-in-css.htm

by Konstantin Rouda

HTML

<section class="c-container">
  <div class="c-item"></div>
</section>

CSS

* {
  box-sizing: border-box;
}

.c-container {
  min-height: 100px;
  border: 1px solid;
    background-image: repeating-linear-gradient(to right, transparent 1%, firebrick 0, firebrick 2%, transparent 2.1%, transparent 5%);
}

.c-item {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: cornflowerblue;
  animation: move 10s cubic-bezier(1,-0.5,1,1.49) 1 forwards;
}


@keyframes move {
  from {
   transform: translateX(0%);
  }
  5% {
    transform: translateX(150%);
  }
  10%, 20% {
    transform: translateX(350%);
  }
  40%, 50% {
    transform: translateX(500%);
  }
  70%, 80% {
    transform: translateX(750%);
  }
  90%, 100% {
    transform: translateX(800%);
  }
}