css3 動畫總結

在用css3創建動畫效果之前，首先要先了解下@keyframes 規則

@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改爲新樣式的動畫效果。
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。
Chrome 和 Safari 需要前綴 -webkit-。

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

類似這個，from,to相當於0%和100%，也就是起始跟結束時的狀態
myfirst就是你定義的動畫效果名稱，可以把它捆綁到任意一個選擇器裏。
當你需要在某個選擇器使用這個動畫效果的時候，就需要用animation，他可以捆綁寫好的動畫效果

div
{
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

這裏直接複製的w3school的例子，應該很容易看懂
animation有很多個屬性，可以根據自己要求去查找，包括規定時長，速度，循環次數之類的
另外，還有一個標籤，transform
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
一般晃動旋轉之類的特效做起來看起來比較炫酷
舉幾個例子，比如做一個地球轉動的效果，結合animation的動畫效果和transform的rotate就很好實現

@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation{
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}

還有左右晃動效果

 @-webkit-keyframes shakelr
{
    0% { 
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
    33% {  
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }
    66% {  
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
    100% {  
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }
} 
.shakelr {
transform-origin: center;
-webkit-transform-origin: center;
animation: shakelr 1s infinite alternate ease-in-out;
-webkit-animation: shakelr 1s infinite alternate ease-in-out;
}

上下晃動效果

@keyframes shaketb {
    0%,100%,20%,50%,80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    60% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
}
.shaketb {
animation: shaketb 1.5s infinite alternate ease-in-out;
-webkit-animation: shaketb 1.5s infinite alternate ease-in-out;
}

這只是最簡單的效果，如果還要做的更炫可能還要配合其他的屬性之類的