<div class="animation-direction">
    <div class="box normal"><p>normal</p></div>
    <div class="box reverse"><p>reverse</p></div>
    <div class="box alternate"><p>alternate</p></div>
    <div class="box alternate-reverse"><p>alternate-reverse</p></div>
  </div>

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

/***animation-direction***/
.animation-direction{
  margin-top: 20px;
}
.animation-direction > div{
  animation-iteration-count: infinite;
}
.normal{
  animation-direction: normal;
}
.reverse{
  animation-direction: reverse;
}
.alternate{
  animation-direction: alternate;
}
.alternate-reverse{
  animation-direction: alternate-reverse;
}