CSS动画

     要定义CSS动画，我们需要先使用@keyframes 规则来声明关键帧。你还需要给动画命名，便于后面引用。

    在@keyframes声明中，我们有两种方法来对它进行定义：关键字from 和 to；或百分比。关键字from 和 to非常适合来定义关键帧。用百分比定义关键帧，从0%关键帧开始，以100%作为结束。0%到100%之间的任何数字都可以定义关键帧，所以使用百分比有非常大的灵活性



HTML代码：
 <img src="~/Content/img/88.png" class="car" />
CSS代码：
  /*创建页面动画--小车*/
.car { animation-name: drive;
        animation-duration: 3s;
         animation-timing-function: ease-in;
          animation-iteration-count: 5; 
          animation-fill-mode: backwards; }


@keyframes drive {
    0% { transform: translateX(0) rotate(-1turn); }
    91% { transform: translateX(1000px) rotate(1turn); }
}

第一个属性是animation-name，用于告诉我们的图像，我们为它应用了哪组关键帧

第二个属性是animation-duration。我们的关键帧定义了整个动画的内容，但是我们并没有声明我们想要让它持续多长。可以把它设置为3s

animation-iteration-count属性也是很方便的一个属性，即使你使用的是默认值。这个属性决定了动画会重复播放多少次，它的默认值是1。

animation-timing-function{linear:动画从头到尾的速度是相同的,ease:默认。动画以低速开始，然后加快，在结束前变慢。ease-in
：动画以低速开始。ease-out：动画以低速结束。ease-in-out：动画以低速开始和结束。}

 

/*创建页面动画--太极*/
.taiji { 
animation-name: zdtj; 
animation-duration: 3s; 
animation-timing-function: linear; 
animation-iteration-count: infinite;
 animation-delay: 0.2s; //延时加载图片
animation-direction: alternate;
width: 200px;
height: 200px /*animation-fill-mode: backwards;*/ 
}

/*animation-iteration-count: infinite 可以使动画一直处于运动的状态*/
/*animation-timing-function：linear 确保动画在运动的过程中保持匀速状态*/
/*animation-direction: reverse; 反向运行    alternate正向和反向交替运行*/
/*animation-fill-mode: forwards; 在动画最后停下时，图片会停在停止的地方*/
/*-o-transform: rotate(40deg); /* Opera浏览器 */
/*-webkit-transform: rotate(40deg); /* Webkit内核浏览器 */
/*-moz-transform: rotate(40deg); /* Firefox浏览器 */

@keyframes zdtj {

    0% { /*rotate的值为正数时是逆时针旋转，当它的值为负数时是顺时针旋转*/ transform: translateX(0) rotate(-1turn); }
    20% { transform: translateX(-200px) rotate(3turn); }
    100% { transform: translateX(1450px) rotate(5turn); }
}

animation-fill-mode ：none：默认值。不设置对象动画之外的状态forwards：设置对象状态为动画结束时的状态backwards：设置对象状态为动画开始时的状态both：设置对象状态为动画结束或开始的状态

animation-direction，它的值可以是normal（正常）,reverse（反转）, alternate（交替）和alternate-reverse（交替反转）

文章主要来源：http://www.w3cplus.com/css3/CSS3-animation.html