CSS3中的动画功能（二）

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

上一篇文章讲解了css3动画中的一个即transitions，那么今天来说说另外一个animations。和transitions不同的是animations可以定义多个关键帧以及每个关键帧中元素的属性值来实现更为复杂的动画效果。
首先来看一个示例：

<!DOCTYPE html>
<head>
    <meta charset=‘utf-8‘>
    <title>HTML5</title>
</head>
<body>
    <style>
        #animations{
            background-color: red;
            width:100px;
        }
        @-webkit-keyframes mycolor{
            0%{
                background-color: red;
                -webkit-transform:rotate(0deg);
            }
            40%{
                background-color: blue;
                -webkit-transform:rotate(30deg);
            }
            70%{
                background-color: yellow;
                -webkit-transform:rotate(-30deg);
            }
            100%{
                background-color: red;
                -webkit-transform:rotate(0deg);
            }
        }
        @-moz-keyframes mycolor{
            0%{
                background-color: red;
                -moz-transform:rotate(0deg);
            }
            40%{
                background-color: blue;
                -moz-transform:rotate(30deg);
            }
            70%{
                background-color: yellow;
                -moz-transform:rotate(-30deg);
            }
            100%{
                background-color: red;
                -moz-transform:rotate(0deg);
            }
        }
        #animations:hover{
            -webkit-animation-name:mycolor;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-iteration-count:infinite;
            -moz-animation-name:mycolor;
            -moz-animation-duration:5s;
            -moz-animation-timing-function:linear;
            -moz-animation-iteration-count:infinite;
        }
    </style>
    <div id="animations">
        鼠标放在我身上可以吗
    </div>
</body>
</html>

下面解释以上代码：
@-webkit-keyframes 关键帧集合名{
创建关键帧的代码
40%{
本关键帧中的样式代码
}
}
其中的40% 0% 100%等可以自己定义的，表示一个过程的不同阶段，如果你有兴趣可以把每个阶段都写下来的。然后是在某个元素的某种状态下来使用它，比如上面的hover时使用时的格式为：
-webkit-animation-name:mycolor; 表示关键帧集合的名称，记得加上不同的前缀
-webkit-animation-duration:5s; 表示完成这个动作所需要的时间
-webkit-animation-timing-function:linear;表示实现动画的方法
-webkit-animation-iteration-count:infinite;表示动画播放次数
实现动画的方法的参数有：
linear：开始和结束以同样的速度进行改变
ease-in：开始慢，然后速度沿曲线值进行加快
ease-out：开始快，然后速度沿曲线值进行放慢
ease：开始慢，然后速度沿曲线值进行加快，然后再沿曲线值放慢
ease-in-out:动画以低速开始和结束
动画的播放次数参数：
n：具体的值
infinite：一直播放
还有：
-webkit-animation-delay:2s;动画的延迟时间

有了以上基础我们就可以做一个实现网页的淡入效果：

<!DOCTYPE html>
<head>
    <meta charset=‘utf-8‘>
    <title>HTML5</title>
    <style>
        @-webkit-keyframes fadein{
            0%{
                opacity: 0;
                background-color: white;
            }
            100%{
                opacity: 1;
                background-color: white;
            }
        }
        @-moz-keyframes fadein{
            0%{
                opacity: 0;
                background-color: white;
            }
            100%{
                opacity: 1;
                background-color: white;
            }
        }
        body{
            -webkit-animation-name:fadein;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-iteration-count:1;
            -moz-animation-name:fadein;
            -moz-animation-duration:5s;
            -moz-animation-timing-function:linear;
            -moz-animation-iteration-count:1;
        }
    </style>
</head>
<body>
示例
</body>
</html>