<div class="timing-function">
    <div class="box linear"><p>linear</p></div>
    <div class="box ease"><p>ease</p></div>
    <div class="box ease-in"><p>ease-in</p></div>
    <div class="box ease-out"><p>ease-out</p></div>
    <div class="box ease-in-out"><p>ease-in-out</p></div>
    <div class="box step-start"><p>step-start</p></div>
    <div class="box step-end"><p>step-end</p></div>
    <div class="box steps-n-start"><p>steps(n , start)</p></div>
    <div class="box steps-n-end"><p>steps(n , end)</p></div>
    <div class="box cubic-bezier"><p>cubic-bezier</p></div>
  </div>

@keyframes sample{
  0% {
    width: 120px;
  }
  100% {
    width: 360px;
  }
}
.box {
  margin-bottom: 10px;
  background-color: #125585;
  color: #fff;
  animation: sample 2.5s 0s;
  width: 360px;
}
.box:nth-child(2n){
  background-color: #DFE3EB;
  color: #000;
}
p{
  margin: 0;
  padding: 5px 10px;
}



/***timing-function***/
.linear{
  animation-timing-function: linear;
}
.ease{
  animation-timing-function: ease;
}
.ease-in{
  animation-timing-function: ease-in;
}
.ease-out{
  animation-timing-function: ease-out;
}
.ease-in-out{
  animation-timing-function: ease-in-out;
}
.step-start{
  animation-timing-function: step-start;
}
.step-end{
  animation-timing-function: step-end;
}
.steps-n-start{
  animation-timing-function: steps(4, start);
}
.steps-n-end{
  animation-timing-function: steps(4, end);
}
.cubic-bezier{
  animation-timing-function: cubic-bezier(.37,-0.41,.82,1.46);
}