css3动画animate

2013-11-18 15:12 明朝阅读(532) 评论(0) 编辑收藏举报

CSS3 动画

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

@keyframes 定义动画关键帧:

@keyframes animateName {
            0%    {
                状态
            }
            100% {
                状态
            }
        }
@keyframes animateName {
              from    {
                状态
            }
              to {
                状态
            }
        }

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。

from和to等同于0%和100%；0%表示动画的开始；100%表示动画的结束；

@keyframes+动画的名字构建。chrome和Safari 要在之前加前缀-webkit-变成了@-webkit-keyframes；

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

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

规定动画的名称
规定动画的时长（默认为0）

例如：

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
        @keyframes tabList {
            0%    {
                width: 50px;
                height: 50px;
            }
            50% {
                width: 100px;
                height: 100px;
            }

            100% {
                width: 150px;
                height: 150px;
            }
        }

        @-webkit-keyframes tabList{
            0%    {
                width: 50px;
                height: 50px;
            }
            50% {
                width: 100px;
                height: 100px;
            }
            100% {
                width: 150px;
                height: 150px;
            }
        }
        .tablist{
            animation: tabList 3s;
            -webkit-animation: tabList 3s;
            background: red;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="tablist"></div>
</body>
</html>

当然对于状态的定义不局限于开始和结束两个时间点，我们可以指定一个动画过程中任何时间点元素的状态。50%就是开始与结束的时间点，也可以写入10%，20%，30%...根据需求挑时间点动画。

CSS3 动画属性：

当我们使用@keyframes定义好了一个动画，它并不会执行产生任何效果，直到我们通过animation属性将动画应用到相应元素上。

对于 CSS3 animation 属性其完整的语法如下：

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

name是使用@keyframes定义好的关键帧名称
duration从字面意思可知是指定动画持续时间
timing-function 指定动画以何种方式播放，具体指的是从元素的一个状态过渡到另一个状态所使用的方式，可用的值有linear，ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。
delay指定动画何时开始，默认为0；
iteration-count 指定动画重复次数，可以指定一个数字，也可以使用'infinite'表示一直播放。默认为1.
direction指定动画是否反向播放或者交替着播放，可用的值有normal, reverse, alternate, alternate-reverse

另外还有一个属性非常有用，一般在js中控制其属性。animation-play-state：paused/running；具体参考：http://www.w3school.com.cn/tiy/c.asp?f=css_animation-play-state

其中name和duration 是必需的，如果不指定duration默认为0，也就是动画持续0秒，所以就无法看到动画效果。

以上的例子.tablist使用@keyframes定义好的动画。

参考：

　　http://www.cnblogs.com/Wayou/p/first_glance_at_the_css3_animation.html

　　http://www.w3school.com.cn/css3/css3_animation.asp

　　http://www.w3schools.com/css/css3_animations.asp