纯CSS3中有2种方式能让对象"动"起来:

昵称10504424 2013-12-16

展开全文

说明:我这个人不喜欢太多废话，所以直接上教程!

先查看效果：

 1  /*
 2             我这里的动画是鼠标移到DIV上面改变背景色、前景色和宽度 
 3             @keyframes=定义动画
 4             aniName=动画名称
 5             from{}=动画开始样式(可以省略开始样式)
 6             to{}=动画结束样式
 7              */
 8         @keyframes aniName {
 9             /*动画开始CSS样式,开始样式可以省略*/
10             from{
11                 /*这里面写CSS样式  例子：*/
12                 background-color:#f00;
13                 color:#00f;
14                 width:300px;
15             }
16             /*动画结束CSS样式*/
17             to{
18                 /*这里面写CSS样式  例子：*/
19                 background:#00f;
20                 color:#f00;
21                 width:500px;
22             }
23         }
24         /*到这里动画已经定义好了，但是为了让更多浏览器支持，所以我们再添加下面代码*/
25 
26         /*解决火狐兼容等*/
27         @-moz-keyframes aniName {
28             from{
29                 background-color:#f00;
30                 color:#00f;
31                 width:300px;
32             }
33             to{
34                 background:#00f;
35                 color:#f00;
36                 width:500px;
37             }
38     }
39         /*解决谷歌等浏览器兼容*/
40         @-webkit-keyframes aniName {
41             from {
42                 background-color: #f00;
43                 color: #00f;
44                 width: 300px;
45             }
46             to {
47                 background: #00f;
48                 color: #f00;
49                 width: 500px;
50             }
51         }
52         /*解决Opera浏览器兼容*/
53         @-o-keyframes aniName {
54             from {
55                 background-color: #f00;
56                 color: #00f;
57                 width: 300px;
58             }
59             to {
60                 background: #00f;
61                 color: #f00;
62                 width: 500px;
63             }
64         }
65         /*
66             到这里基本的兼容性就解决了，接下来就是使用  css代码：animation
67             我这里是给一个DIV添加动画 在html代码中添加一个div ID=testDIV_A
68             */
69         #testDIV_A:hover {
70             -moz-animation: 1s alternate infinite aniName;
71             -o-animation: 1s alternate infinite aniName;
72             -webkit-animation: 1s alternate infinite aniName;
73             animation: 1s alternate infinite aniName;
74         }

效果查看

到这里关键帧动画就完成了，接下来就是过渡动画

过渡
简介:过渡是你改变对象的CSS样式时的一个动画 W3School教程导航
CSS样式:

 1         /*
 2             我这里的动画和上面一样，鼠标移到DIV上面改变背景色、前景色和宽度 
 3             这里还是一个DIV ID=testDIV_B
 4             */
 5         #testDIV_B {
 6             -moz-transition: width,background,color;
 7             -o-transition: width,background,color;
 8             -webkit-transition: width,background,color;
 9             transition: width 1s,background 3s,color 2s;
10         }
11         #testDIV_B:hover{
12             /*
13                 由于宽度和背景色无法在这里改变，所以我写在JS里面了
14 <script>
15     $('#testDIV_B').mousemove(function () {
16         $(this).css({ 'background': '#0ff', 'width': '500px' });
17     });
18     $('#testDIV_B').mouseout(function () {
19         $(this).css({ 'background': '#f00','width':'100px' });
20     });
21 </script>
22                 */
23             color:#ff0;
24         }