css3动画

CSS 也可以实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式

可以随意更改任意数量的 CSS 属性

如需使用 CSS 动画，首先为动画指定一些关键帧

关键帧包含元素在特定时间所拥有的样式

@keyframes 规则和所有 CSS 动画属性

@keyframes 规则

通过 @keyframes 规则，您能够创建动画

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%

0% 是动画的开始时间，100% 动画的结束时间

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

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定

语法：@keyframes animationname {keyframes-selector {css-styles;}}

属性值

实例

@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

animation

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

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

语法：animation: name duration timing-function delay iteration-count direction;

属性值：

实例

    div
    {
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
    }

animation-play-state 属性

animation-play-state 属性规定动画正在运行还是暂停

注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

语法：animation-play-state: paused|running;

属性值：

实例

    
        div{
        animation-play-state:paused;
        -webkit-animation-play-state:paused; /* Safari 和 Chrome */
    }