CSS3 动画 animation

动画就是在html页面上让一个盒子动起来。
如下是animation的属性;

这里简单介绍几个属性的内部属性，animation-timing-function

animation-iteration-count

1.可以使用总的写法

animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
/*不一定按照顺序前面的必须有才能写后面的但是前两个必须有*/

是否反方向有四个属性，

normal 正常
reverse  反方向运行
alternate  先正常运行再反方向运行 ，并持续交替
alternate-reverse  先反方向运行再正反向运行，并持续交替运行

2、使用动画
要使用动画，要进行两步，首先规定动画，其次定义动画
规定动画

@keyframes 动画名称 {
//定义动画
from {
  transform:translateX(800px); //开始位置                 
}
to  {
   transform: translateX(0px); //结束位置
}
}

/**定义动画*/
div  {
  width: 30px;
  height: 50px;
  animation: 动画名称 5s ;
}
/*两个动画名称要一样*/

实现多组动画，就是在规定动画的时候设置多个点 ，上面的直接是from 和 to 从哪到哪，是一组动画，如果使用多组可使用百分比的模式将其分为多组，如下：

@keyframes 动画名称 {
   0%  {
   //可以写多个动画的效果,用空格隔开就可以
     transform: translate3d(0,0,0) rotateY(180deg);
    }
      25%  {
     transform: translate3d(800px,0,0);
    }
     50%  {
     transform: translate3d(800px,400px,0);
    }  
    75%  {
     transform: translate3d(0,400px,0);
    100%  {
     transform: translate3d(0,0,0);
    }
}

3.animation-play-state动画运行或暂停
默认属性是running 就是运行， 另一个是暂停 paused
可以和鼠标移动上暂停，鼠标移动开就继续运行

nav:hover {
   animation-play-state: paused;
}