<style>
  * {
    box-sizing: border-box;
  }
  html, body {
    align-items: center;
    background: linear-gradient(45deg, #e87e04, #89c4f4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    padding: 0;
    width: 100vw;
  }
  div {
    align-items: center;
    background-color: rebeccapurple;
    color: #fff;
    display: flex;
    font-weight: bold;
    justify-content: center;
    height: 100px;
    margin: 10px 0;
    width: 100px;
  }
</style>
<div>ease</div>
<div>ease-in</div>
<div>ease-out</div>
<div>ease-in-out</div>
<div>linear</div>
<div>cubic-bezier</div>
<div>steps</div>
div {
  animation-name: move;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

div:nth-of-type(1) {
  animation-timing-function: ease;
}
div:nth-of-type(2) {
  animation-timing-function: ease-in;
}
div:nth-of-type(3) {
  animation-timing-function: ease-out;
}
div:nth-of-type(4) {
  animation-timing-function: ease-in-out;
}
div:nth-of-type(5) {
  animation-timing-function: linear;
}
div:nth-of-type(6) {
  animation-timing-function: cubic-bezier(.15,.5,1,0);
}
div:nth-of-type(7) {
  animation-timing-function: steps(10);
}

@keyframes move {
  0%, 10% {
    transform: translateX(-40vw);
  }
  90%, 100% {
    transform: translateX(40vw);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.