CSS3 动画

浏览数：15 / 时间：2015年06月09日

CSS3 动画

通过CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及Javascript。

CSS3 @keyframes规则

如果在CSS3中创建动画，你需要学习@keyframes规则。

@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建有当前样式逐渐改为新样式的动画效果。

浏览器支持

属性	浏览器支持
@keyframes
animation

IE10、Firefox以及Opera支持@keyframes规则和animation属性。

Chrome和Safari需要加前缀-wekit-.

注释：IE9,以及更早的版本，不支持@keyframe规则和animation属性。

CSS3 动画

当你在@keyframes中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少一下两项CSS3动画属性，即可将动画绑定到选择器：

规定动画的名称
规定动画的时长

把‘myfirst’动画绑定到div元素，时长：5s:

        @keyframes myfirst {
            from {
                background:red;
            }
            to {
                background:blue;
            }
        }
        div.keyframesOne {
            animation:myfirst 5s;
            width:100px;
            height:100px;
            border:1px solid red;
        }

注释：你必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是0；

什么是CSS3中的动画？

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

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

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

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

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

实例1：

        @keyframes myfirst {
            0% {
                background:red;
            }
            25% {
                background:yellow;
            }
            50% {
                background-color:blue;
            }
            100% {
                background-color:green;
            }
        }
        div.keyframesOne {
            width: 100px;
            height: 100px;
            animation: myfirst 4s;
            border: 2px inset black;
        }

实力2：

        @keyframes myfirst {
            0% {
                background:red;left:0px;top:0px;
            }
            25% {
                background:yellow;left:200px;top:0px;
            }
            50% {
                background:blue;left:200px;top:200px;
            }
            75% {
                background:green;left:0px;top:200px;
            }
            100% {
                background:red;left:0px;top:0px;
            }
        }
        div.keyframesOne {
            width: 100px;
            height: 100px;
            border: 2px double blue;
            position: absolute;
            animation: myfirst 4s;
        }

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

实例1：

        @keyframes myfirst {
            from {
                background-color:red;
            }
            to {
                background-color:blue;
            }
        }
        div.animationOne {
            width: 100px;
            height: 100px;
            border: 2px solid black;
            animation-name: myfirst;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: running;
        }

实例2：

        @keyframes myfirst {
            0% {
                left:0px;background:red;
            }
            25% {
                left:100px;background:blue;
            }
            100% {
                left:200px;background:green;
            }
        }
        div.keyframesOne {
            width:100px;
            height:100px;
            position:absolute;
            border:1px dotted black;
            animation:myfirst 5s linear 2s infinite alternate;
        }