css3系列之animation

在上次博文中已经讲了transition，其实animation与transition功能相同，都是通过改变元素
的属性来实现动画效果的。但是它们也有区别：transition是只能通过改变指定属性的开始值
与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果。animation却可以通
过定义多个关键帧以及每个关键帧中元素的属性值来实现更为复杂的动画效果。

语法

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

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。（infinite无限轮播）
animation-direction	规定是否应该轮流反向播放动画。

有理论不实践，那是纸上谈兵。下面让我们动手写一个简单的示例吧。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> animation </title>
    <style type="text/css">
    /**/
    div {margin:20px 0;}
    #animate_1 {position:absolute; background-color:red;top:100px;width:500px;}
    @-webkit-keyframes mycolor {
        0% {
            background-color:red;
        }
        40% {
            background-color:darkblue;
        }
        70% {
            background-color:yellow;
        }
        100% {
            background-color:red;
        }
    
    }
    #animate_1:hover{
        -webkit-animation: mycolor 5s linear infinite
    }

    </style>
</head>
<body>
    <div id="animate_1">animation_1</div>
</body>
</html>

看到了吧，上面的背景色变换，只需要通过animation的几个关键帧来实现动画的效果

当然animation可以同时改变多个属性值来实现比较复杂的动画效果。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> animation </title>
    <style type="text/css">
    /**/
    div {margin:20px 0;}
    #animate_1 {position:absolute; background-color:red;top:100px;width:500px;}
    @-webkit-keyframes mycolor {
        0% {
            background-color:red;
            -webkit-transform: rotate(0deg);
        }
        40% {
            background-color:darkblue;
            -webkit-transform: rotate(30deg);
        }
        70% {
            background-color:yellow;
            -webkit-transform: rotate(-30deg);
        }
        100% {
            background-color:red;
            -webkit-transform:rotate(0deg);
        }
    
    }
    #animate_1:hover{
        -webkit-animation: mycolor 5s linear infinite
    }
    
    </style>
</head>
<body>
    <div id="animate_1">animation_1</div>
</body>
</html>

效果是不是很酷，只要通过css就可以实现背景变色及元素变换角度。在过去那是实现这个效果
可就疯狂的写一大堆的javascript代码了。

下面说下实现动画的方法

animation-timing-function 规定动画的速度曲线。

语法

animation-timing-function: value;

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
动画以低速开始。	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中设置自己的值。可能的值是从 0 到 1 的数值。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> animation </title>
    <style type="text/css">
    /**/
    div {margin:20px 0;}
    @-webkit-keyframes myanimate_2 {
        0% {
            width:100px;
            height:100px;
        }
        100% {
            width:500px;
            height:500px;
        }
    }
    #animate_2 {
        width:500px;
        height:500px;
        background-color:red;
        -webkit-animation:myanimate_2 5s ease-out;
    }
    
    @-webkit-keyframes fadein {
        0% {
            opacity:0;
            background-color:white;
        }
        100% {
            opacity:1;
            background-color:white;
        }
    }
    </style>
</head>
<body>
    <div id="animate_2">animation_2</div>
</body>
</html>

最后一个例子实现一个网站经常用到的动画效果–网页的淡入效果。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> animation </title>
    <style type="text/css">
    /**/
    div {margin:20px 0;}
    
    @-webkit-keyframes fadein {
        0% {
            opacity:0;
            background-color:white;
        }
        100% {
            opacity:1;
            background-color:white;
        }
    }
    body {
        -webkit-animation:fadein 5s linear 1;
    }
    </style>
</head>
<body>
    <div id="animate_1">animation_1</div>
    <div id="animate_2">animation_2</div>
</body>
</html>

上面的例子只是一些很基本的动画效果示例。大家对css3的动画效果感兴趣的可以结合我前一次的分享的transition一起实现更加有趣的动画效果。期待大家动手试试吧！

相关文章：

你感兴趣的文章：

标签云：