CSS3 @keyframes的用法介紹

使用動畫之前必須先定義關鍵幀，一個關鍵幀表示動畫過程中的一個狀態。在CSS3中，@keyframes規則用於創建動畫。在@keyframes中規定某項CSS樣式，就能創建由當前樣式逐漸變為新樣式的動畫效果。@keyframes屬性的語法格式如下。

@keyframes animationname {
    keyframes-selector{css-styles;}
}

在上面的語法格式中，@keyframes屬性包含的參數具體含義如下。

● animationname：表示當前動畫的名稱，它將作為引用時的唯一標識，因此不能為空。

● keyframes-selector：關鍵幀選擇器，即指定當前關鍵幀要應用到整個動畫過程中的位置，值可以是一個百分比、from或者to。其中，from和0%效果相同表示動畫的開始，to和100%效果相同表示動畫的結束。

● css-styles：定義執行到當前關鍵幀時對應的動畫狀態，由CSS樣式屬性進行定義，多個屬性之間用分號分隔，不能為空。

例如，使用@keyframes屬性可以定義一個淡入動畫，示例代碼如下。

@keyframes 'appear'{
    0%{opacity: 0;}　　　/*動畫開始時的狀態，完全透明*/
    100%{opacity: 1;}　　/*動畫結束時的狀態，完全不透明*/
}

 

上述代碼創建了一個名為apper的動畫，該動畫在開始時opacity為0(透明)，動畫結束時opacity為1(不透明)。該動畫效果還可以使用等效代碼來實現，具體如下。

@keyframes 'appear'{
    from{opacity: 0;}　　　/*動畫開始時的狀態，完全透明*/
    to{opacity: 1;}　　　　/*動畫結束時的狀態，完全不透明*/
}

 

另外，如果需要創建一個淡入淡出的動畫效果，可以通過如下代碼實現，具體如下。

@keyframes 'appeardisappear'{
    from,to{opacity: 0;}　　/*動畫開始和結束時的狀態，完全透明*/
    20%,80%{opacity: 1;}　/*動畫的中間狀態，完全不透明*/
}

　　

在上述代碼中，為了實現淡入淡出的效果，需要定義動畫開始和結束時元素不可見，然后漸漸淡出，在動畫的20%處變得可見，然后動畫效果持續到80%處，再慢慢淡出。

注意：

Internet Explorer 9，以及更早的版本，不支持@keyframe規則或animation屬性。InternetExplorer 10、Firefox 以及Opera 支持@keyframes規則和animation屬性。

文章轉自：黑馬程序員web前端開發