CSS3动画animation和@keyframes

1. animation

CSS animation 属性是
animation-name，
animation-duration,
animation-timing-function，
animation-delay，
animation-iteration-count，
animation-direction，
animation-fill-mode ,
animation-play-state
属性的一个简写属性形式。

默认值

animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

属性

/* 所有动画属性的简写属性  */
animation 

/* 规定 @keyframes 动画的名称 */
animation-name	

/* 规定动画完成一个周期所花费的秒或毫秒。默认是 0s */
animation-duration	

/* 规定动画的速度曲线。默认是 "ease" */
animation-timing-function	/* linear|ease|ease-in-out(	动画以低速开始和结束)|step-start|step-end */

/* 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 */
animation-fill-mod /* none|forwards|backwards|both|initial|inherit; */

/* 规定动画何时开始。默认是 0 */
animation-delay

/* 规定动画被播放的次数。默认是 1 */
animation-iteration-count /* infinite | <number> */

/* 规定动画是否在下一周期逆向地播放。默认是 "normal" */
animation-direction /* normal | reverse | alternate(动画交替反向运行) | alternate-reverse */

/* 规定动画是否正在运行或暂停。默认是 "running" */
animation-play-state /* running | paused */

2. @keyframes

@keyframes 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。（from相当于0%, to相当于100%）

.slidein {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: 3;
  animation-direction: alternate;
}
    
@-moz-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  50% {
    margin-left:10% !important; /* 关键帧中出现的 !important 关键词将会被忽略 */
    width:30%
  }
  to {
    margin-left:0%;
    width:100%;
  }
}