css实现动画

css实现动画

div {
  width:200px;
  height:200px;
  background-color:pink;
  /*animation: 动画名称 动画时间 运动曲线 何时开始 播放次数(infinite无限循环) 是否反方向*/
 animation: go 2s ease 0s 2 alternate;/*引用动画 一般只使用前两个参数*/
}
/*定义动画 keyframe 动画名称 {} */
@keyframes go{
 /*from{
        transform:translateX(0);
 }
 to{
        transform:translateX(600px);
 }*/
 0%{/*起始位置，等价于 from*/
        transform:translate3d(0，0,0);
 }
 25%{
        transform:translate3d(800px，0,0);
 }
 50%{
        transform:translate3d(800px，400px,0);
 }
 75%{
        transform:translate3d(0，400px,0);
 }
 100%{/*相当于 to*/
        transform:translate3d(0，0,0);
 }
}