CSS自定义动画

 动画名称  animation-name   ：   （动画名称必须与@keyfarmes的名称相对应，因为动画名称是由@keyfarmes定义的） 例如：animation-name：AA；则 @keyfarmes AA 也为该名称。

关键帧  @keyfarmes    :   关键帧则是给动画 (从from开始 到 to结束) 的一些效果。 例如：@-webkit-keyfarmes AA{0%{margin-left:0px; radius:0px; height:0px;}  100%{margin-left:300px; radius:50%; height:200px;}  这里加上-webkit则开始到结束就要换成百分比0%到100%，直接使用@keyfarmes就要使用from到to。

   动画时间  animation-duration    ：动画发生到结束的时间  例如： .div{ animation-duration:1s;}

   动画的过渡速度  animation-timing-function   : 动画运作的快慢方式    有以下5种：linear从开始到结束速度都是一样的，ease开始低速然后加快结束低速，ease-in开始时是低速，ease-out结束时是低速，ease-in-out开始和结束时是低速。 例如：.div{animation-timing-function:ease-in;}。

   动画延迟时间  animation-delay   ： 延缓动画开始的时间    例如： .div{animation-delay:2s;}  这则是两秒之后开始。

   动画执行次数  animation-iteration-count   : 动画重复开始的次数    infinite表示无数次  例如： .div{animation-iteration-count:2;}这则表示重复两次。

   动画顺序   animation-direction    :动画运作时的正反顺序    有以下4种：normal 正常方向，reverse 反方向，alternate先正再反  并持续交替，alternate-reverse 先反再正 并持续交替。   例如： .div{animation-direction:alternate;}

   动画的状态   animation-liay-state    : 动画运行是的状态  有以下两种：running 运动，paused 暂停 这个适用于hover这个选择符。 例如：.div:hover{animation-play-state:paused;}  鼠标指向时就暂停。

   动画时间之外的状态   animation-fill-mode  ：(不能设置动画执行次数为无数次，则该样式不会出现效果)动画结束后的状态 有以下4种 ：none 无，forward 动画结束（to里面的所有样式）时的状态，backward 动画开始（from里面的所有样式）时的状态，both 动画开始或者结束时的状态。 例如 .div{anination-fill-state:forward;}

   动画复合属性    animation   ： 复合属性可以把动画的属性都综合在animation里  例如： .div{animation: AA 1s 1s 2 alternate backward;} 这样比较便捷。