css 动画效果

要搞就搞明白，一知半解时停止研究 损失最大

css3意义：

CSS3 动画

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

重点知识

CSS3 @keyframes 规则

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

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

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

参考资料:http://www.w3school.com.cn/css3/css3_animation.asp

作业：

1.实现颜色的变化

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

，多种颜色变化

@keyframes myfirst

{

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: green;}

}

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;}

}

3.重复

animation-iteration-count 规定动画被播放的次数

animation-iteration-count:1;
-webkit-animation-iteration-count:1; /* Safari 和 Chrome */

设置一个够大的数。

简写一个参数

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;

animation: myfirst 5s linear 2s infinite alternate;

/* Firefox: */

-moz-animation: myfirst 5s linear 2s infinite alternate;

/* Safari 和 Chrome: */

-webkit-animation: myfirst 5s linear 2s infinite alternate;

/* Opera: */

-o-animation: myfirst 5s linear 2s infinite alternate;

实际应用：

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <style type="text/css">
        @keyframes passdown {
            0% {
                bottom: 5px;
            }
            50% {
                bottom: 12px;
            }
            100% {
                bottom: 5px;
            }
        }
        @-webkit-keyframes passdown {
            0% {
                bottom: 5px;
            }
            50% {
                bottom: 12px;
            }
            100% {
                bottom: 5px;
            }
        }
        .one-slide-8 {
            opacity: 1;
            transition: all 0.1s ease-in 5.1s;
            -webkit-transition: all 0.1s ease-in 5.1s;
        }
        .pub-passdown {
            position: absolute;
            width: 18px;
            height: 16px;
            left: 50%;
            margin-left: -9px;
            bottom: 10px;
            /*transition: all 1s ease-in 20s;*/
            animation-name: passdown;
            animation-timing-function: ease;
            animation-duration: 0.8s;
            animation-iteration-count: infinite;
            /*-webkit-transition: all 1s ease-in 20s;*/
            -webkit-animation-name: passdown;
            -webkit-animation-timing-function: ease;
            -webkit-animation-duration: 0.8s;
            -webkit-animation-iteration-count: infinite;
        }
    </style>
</head>
<body style="background-color:#000000">
 <div class="one-slide-8 pub-passdown">
     <img src="http://m.yintai.com/event/actives/luyaninvitation/img/arrow-doubleup.png"/>
 </div>
</body>
</html>