SOURCE

<div></div>

div {
  width: 100px;
  height: 100px;
  position: relative;
  /* 把div的样式设为和终点值一样 */
  left:180px;
  background-color:yellow;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-direction: alternate;  
  /* animation-timing-function:ease-in-out; */
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  80%  {background-color:yellow; left:200px; top:0px;}
  100%  {background-color:yellow; left:180px; top:0px;}
}