英 [freɪmz] 美 [freɪmz]
n.邊框;框架( frame的名詞複數 );眼鏡框;組織
css @keyframes屬性 語法
@keyframes是什麼?
@keyframes是CSS的一種規則,可以用來定義CSS動畫的一個週期的行為,創造簡單的動畫。
作用:透過 @keyframes 規則,您能夠建立動畫。
說明:創建動畫的原理是,將一套 CSS 樣式逐漸變化為另一套樣式。在動畫過程中,您能夠多次改變這套 CSS 樣式。以百分比來規定改變發生的時間,或透過關鍵字 "from" 和 "to",等價於 0% 和 100%。 0% 是動畫的開始時間,100% 動畫的結束時間。為了獲得最佳的瀏覽器支持,您應該始終定義 0% 和 100% 選擇器。
註解:請使用動畫屬性來控制動畫的外觀,同時將動畫與選擇器綁定。
css @keyframes屬性 範例
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /* Firefox */ -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ -o-animation:mymove 5s infinite; /* Opera */ } @keyframes mymove { 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} } @-moz-keyframes mymove /* Firefox */ { 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} } @-o-keyframes mymove /* Opera */ { 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} } </style> </head> <body> <p><b>注释:</b>本例在 Internet Explorer 中无效。</p> <div></div> </body> </html>
執行實例 »
點擊 "執行實例" 按鈕查看線上實例