css樣式動畫

1.當在 @keyframes 建立動畫，把它綁定到一個選擇器，不然動畫不會有任何效果。

指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

• 規定動畫的名稱
• 規定動畫的時長

      div {

             animation: myfirst 5s;

             -webkit-animation: myfirst 5s; /* Safari 與 Chrome */

}

2.動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。

您能夠改變任意多的樣式任意多的次數。

請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

0% 是動畫的開始，100% 是動畫的完成。

爲了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

例子：

當動畫爲 25% 及 50% 時改變背景色，而後當動畫 100% 完成時再次改變

@keyframes myfirst {

           0% {background: red;}

           25% {background: yellow;}

           50% {background: blue;}

          100% {background: green;}

}

 @-webkit-keyframes myfirst /* Safari 與 Chrome */

         { 0% {background: red;}

         25% {background: yellow;}

         50% {background: blue;}

         100% {background: green;}

}

@keyframes ：規定動畫

animation：全部動畫屬性的簡稱

animation-name：動畫名稱