CSS3动画

【前言】

　　　通过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：规定动画事件之外的状态