【前言】
通过CSS3，我们能够创建动画，可以在许多场合下替代动画图片、Flash动画和JS
【CSS3的@keyframes规则】
@keyframes规则用于创建动画，在@keyframes中规定某项CSS样式，就能创建由当前样式主键变化成新样式的动画效果。
【兼容性】
IE10、Firefox、Opera支持@keyframes规则和animation属性
Chrome和Safari要添加前缀-webkit-
【用法】
@keyframes规定动画的规则
animation绑定动画到某个元素上
【@keyframes】
@keyframes myfirst{from {background: red;}to {background: yellow;}}@-moz-keyframes myfirst /* Firefox */{from {background: red;}to {background: yellow;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{from {background: red;}to {background: yellow;}}@-o-keyframes myfirst /* Opera */{from {background: red;}to {background: yellow;}}【animation】
必须指定动画的时长。
div{animation: myfirst 5s;-moz-animation: myfirst 5s; ???/* Firefox */-webkit-animation: myfirst 5s; ???/* Safari 和 Chrome */-o-animation: myfirst 5s; ???/* Opera */}【CSS3动画属性】
@keyframes：规定动画规则
animation：所有动画属性的简写，除了animation-play-state
animation-name：绑定@keyframes的动画名称
animation-timing-function：规定动画的速度曲线
animation-delay：指定动画几秒后执行
animation-iteration-count：规定动画执行的次数
animation-direction：规定动画是否在下一周期逆向播放
animation-play-state：规定动画是否正在运行或暂停
animation-fill-mode：规定动画事件之外的状态
CSS3动画
原文地址：http://www.cnblogs.com/controlms/p/7921645.html