@keyframes

語法:

@keyframes <identifier> '{' <keyframes-blocks> '}';

<keyframes-blocks>:[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

取值:

<identifier>
identifier定義一個動畫名稱
<keyframes-blocks>:
定義動畫在每個階段的樣式,即幀動畫。

說明:

指定動畫名稱和動畫效果。
  • @keyframes定義的動畫名稱用來被animation-name所使用。
  • 定義動畫時,簡單的動畫可以直接使用關鍵字from和to,即從一種狀態過渡到另一種狀態:

    示例代碼:

    @keyframes testanimations{
    
    	from{opacity:1;}
    
    	to{opacity:0;}
    
    }

    其中testanimations是該動畫的名字,該動畫表示某個東西將逐漸消失。

  • 如果複雜的動畫,可以混合<percentage>去設置某個時間段內的任意時間點的樣式:

    示例代碼:

    @keyframes testanimations{
    
    	from{transform:translate(0,0);}
    
    	20%{transform:translate(20,20);}
    
    	40%{transform:translate(40,0);}
    
    	60%{transform:translate(60,20);}
    
    	80%{transform:translate(80,0);}
    
    	to{transform:translate(100,20);}
    
    }
  • 當然,也可以不適用關鍵字from和to,而都使用<percentage>

    示例代碼:

    @keyframes testanimations{
    
    	0%{transform:translate(0,0);}
    
    	20%{transform:translate(20,20);}
    
    	40%{transform:translate(40,0);}
    
    	60%{transform:translate(60,20);}
    
    	80%{transform:translate(80,0);}
    
    	100%{transform:translate(100,20);}
    
    }

    注意,這裏的0%不能簡寫成0。

兼容性:

  • 淺綠 = 支持
  • 紅色 = 不支持
  • 墨綠 = 部分支持
  • 橙色 = 实验性质
支持版本\類型 IE Firefox Safari Chrome Opera
版本 6.0-9.0 4.0 5.1 13.0-16.0 11.50-11.60
版本 10.0 5.0-9.0

寫法:

內核類型 寫法
Webkit(Chrome/Safari) @-webkit-keyframes
Gecko(Firefox) @-moz-keyframes
Presto(Opera)
Trident(IE) @-ms-keyframes
W3C @keyframes

示例: