css3动画

css3的动画支持大多数浏览器，但最好还是加-webkit-animation等属性

IE9以及以前的版本并不支持。

animation属性是一个简写属性，用于设置六个动画的属性;

animation-name　　　　　　　　  动画名称(自己取的名称)

animation-duration　　　　　　　 动画持续时间(这个必须要写，否则显示不出效果)　　　

animation-timing-function　　　　动画的速度曲线，默认是"ease"

animation-delay　　　　　　　　　动画何时开始，默认0.（这个需用秒或毫秒左单位:0s）

animation-iteration-count　　　  动画迭代计数,默认1(动画的重复次数，设infinite为无数次)

animation-direction　　　　　　　 动画方向

动画还需要一个关键帧来控制，需要重新用一个css3规定动画属性编写

例如animation-mymove那么后面名字就是用来连接帧的

@keyframes  mymove前面的@就是用来声明属性，后面mymove即可连接在一起。

前面都是属性，它默认的属性值为none，0并且无继承行的。

@keyframes mymove{

from{background:red;}

to{background:yellow}

}

@keyframes  mymove属性，它的属性值里面有几种方法。

这里from是开始，它的属性值是红色。

to是结束，它的属性值是黄色，

animation-duration,设置了时间。记得设置宽高才看得见效果

然后会发现它会从红到黄产生一个动画。

什么是css3中的动画？

动画是使元素从一种样式逐渐变化为另一个样式的效果。

您可以改变任意多的样式任意多的次数。

用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%。

0%是动画的开始，100%是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器。

@keyframes mymove{

0%{background:red;}

25%{background:yellow;}

50%{background:blue;}

100%{background:green;}

}

以上只是改变了背景色，如需改变位置的话如下:

@keyframes mymove{

0%{background:red; left:0px; top:0px;}

25%{background:yellow;left:200px; top:0px;}

50%{background:blue; left:200px; top:200px}

75%{background:red; left:0px; top:200px;}

100%{background:green;left:0px; top:0px;}

}

0%的时候背景是红色，位置保持不变。

25%的时候背景是黄色，离左200px，上为0.

50%的时候背景是蓝色，离左200px,离上200px.

75%的时候背景是红色，左为0,离上200px.

100%的时候背景绿色， 左为0,上为0.回到了原点了。

原文：http://www.cnblogs.com/liang1/p/4956731.html