css 动画

<div class="animate"> div</div>

css:

.animate{
 width:30px;
 height:60px;
 background:red;
animation:anima 2s linear forwards;
}
@keyframes  anima
{
  0%{
  transform:translateX(300px);  
}

 100%{
  transform:translateX(500px);  
} 

}

　　animation 动画属性，其属性值 animation: 动画名称（必要）  动画时间（必要） 动画变化速度（必要） 多久开始执行动画   动画循环次数  动画方向；

     @keyframes 动画名称 要执行动画的效果   

　　0%动画开始

      100%动画结尾