CSS3动画

使用CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画和JavaScript。

CSS3关键帧规则

要创建CSS3的动画，你必须了解@关键帧规则（Keyframes）。

@关键帧的规则是创建动画。@关键帧规则内指定CSS风格和动画将逐步从目前的风格改变为新的样式。

浏览器支持

 @keyframes IDENT { ????from { ??????Properties:Properties value; ????} ????Percentage { ??????Properties:Properties value; ????} ????to { ??????Properties:Properties value; ????} ??} ??或者全部写成百分比的形式： ??@keyframes IDENT { ?????0% { ????????Properties:Properties value; ?????} ?????Percentage { ????????Properties:Properties value; ?????} ?????100% { ????????Properties:Properties value; ?????} ???}

@keyframes myfirst{from {background: red;}to {background: yellow;}}@-moz-keyframes myfirst /* Firefox */{from {background: red;}to {background: yellow;}}@-webkit-keyframes myfirst /* Safari and Chrome */{from {background: red;}to {background: yellow;}}@-o-keyframes myfirst /* Opera */{from {background: red;}to {background: yellow;}} div{animation: myfirst 5s;-moz-animation: myfirst 5s; /* Firefox */-webkit-animation: myfirst 5s; /* Safari and Chrome */-o-animation: myfirst 5s; /* Opera */}

animation的属性有下面这么几种内容：

 ????-webkit-animation-name:‘wobble‘;/*动画属性名，也就是我们前面keyframes定义的动画名*/ ????-webkit-animation-duration: 10s;/*动画持续时间*/ ????-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/ ????-webkit-animation-delay: 2s;/*动画延迟时间*/ ????-webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/ ????-webkit-animation-direction: alternate;/*定义动画方式*/

CSS3动画

原文地址：http://www.cnblogs.com/ltwm123/p/7469438.html