純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         /*到這里動畫已經(jīng)定義好了，但是為了讓更多瀏覽器支持，所以我們再添加下面代碼*/
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         }