第十九章 CSS 3中的动画功能 - 《HTML 5与CSS 3权威指南》

在CSS 3中，增加了2种动画功能：

Transitions从一个属性值平滑过渡到另一个属性值。
Animations支持通过关键帧的指定在页面上产生更复杂的动画效果。

本章我的代码全部是再FireFox 9下载编写，所有都是使用的 -moz-XXX。如果你使用的是Opera，请使用-o-XXX; 如果你使用的是Google\Apple浏览器，请使用-webkit-XXX。

Transitions

transitions属性的使用方法

1	`transitions: property duration timing-function`

property表示哪个属性进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 5与CSS 3权威指南 - 第十九章 CSS 3中的动画功能</title>
        <style type="text/css">
        img{
            position: absolute;
            top 7px;
            left:0;
            background-color:#ffff00;
            -moz-transform: rotate(0deg);
            -moz-transitions:background-color 2s linear, -moz-transform 1s linear;
        }
        div:hover img{
            position: absolute;
            left: 30px;
            background-color:#00ffff;
            -moz-transform: rotate(720deg);
        }
        </style>
    </head>
    <body>
        <div>Transitions属性测试DIV <img src="01.jpg" alt=" *" width="300px" /></div>
        <footer>代码出自开源中国社区：<a href="http://my.oschina.net/TOW">Andy.Zhou</a></footer>
    </body>
</html>