語法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
- name->動畫名 ，自定義(不可缺參數)
- duration->動畫完成時間 ，以秒記(不可缺參數)
- timing-function->動畫進行的速度，liner（默認）/ease/ease-in/ease-out/ease-in-out/cubic-bezier(0,0,0,0)
- delay->動畫開始前的延遲，以秒記
- iteration-count->動畫播放次數
- direction->是否輪流反向播放動畫
- fill-mode->動畫不播放時實用什么元素樣式
- play-state->指定動畫在運行或暫停
例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文檔標題</title> 6 <style> 7 h1{ 8 9 } 10 div{ 11 width:150px; 12 height:100px; 13 text-align:center; 14 color:transparent;//設置字體顏色透明 15 -webkit-background-clip: text;//剪除背景中文本以外部分 16 background:red; 17 border:5px solid #567577; 18 border-radius:20px; 19 position:relative; 20 margin:5px; 21 22 //animation名是myfrist 10s完成動畫 勻速播放 0s延遲 無限播放 奇數次正向播 23 //放偶數次反向播放 播放動畫 24 25 animation:myfrist 10s linear 0s infinite alternate running; 26 -moz-animation:myfrist 10s linear 2s infinite alternate running; 27 -o-animation:myfrist 10s linear 2s infinite alternate running; 28 -webkit-animation:myfrist 10s linear 2s infinite alternate running; 29 } 30 @keyframes myfrist{ 31 0% {border-color:red;background-color:orange;} 32 20% {border-color:yellow; background-color:yellow;} 33 40% {border-color:blue; background-color:green;} 34 60% {border-color:green;background-color:blue; } 35 80% {border-color:red;background-color:indigo; 36 100% {border-color:green;background-color:violet; } 37 } 38 } 39 </style> 40 </head> 41 <body> 42 <div> 43 <h1> 44 123456 45 </h1> 46 </div> 47 </body> 48 </html>
注：運行代碼清除注釋。代碼中注釋非html注釋格式。