<div id="ball"></div>

body{
  background-color:#eee;
  padding:50px;
}
#ball{
  width:100px;
  height:100px;
  border-radius:50%;
  background-color:#A94CAF;
  animation:move 2s ease forwards  ; /*停留在结束状态。*/
}

@keyframes move{
  0%{
    transform:translateX(0);
  }
  50%{
    transform:translateX(400px);
  }
  100%{
    transform:translateX(400px) scale(2); /*状态的样式不会继承。所以必须加上x轴的坐标值。*/
  }
}