CSS3 @keyframes簡單動畫實現(xiàn)
定義：
通過 @keyframes 規(guī)則，能夠創(chuàng)建動畫。
創(chuàng)建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，可以多次改變這套 CSS 樣式。
以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞 "from" 和 "to"，等價于 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結(jié)束時間。
為了獲得最佳的瀏覽器支持，應(yīng)始終定義 0% 和 100% 選擇器。
重要：兼容問題！@keyfrmes 不兼容IE 9 and 以及更早版本的瀏覽器.
語法：
@keyframes animationname {keyframes-selector {css-styles;}}
| animationname | 必需。定義動畫的名稱。 |
| keyframes-selector | 必需。動畫時長的百分比。 合法的值：
|
| css-styles | 必需。一個或多個合法的 CSS 樣式屬性。 |
@keyframes mymove{ 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;}}//多個特性變化，用;隔開.@-webkit-keyframes mymove{0% {top:0px; left:0px; background:red;}25% {top:0px; left:100px; background:blue;}50% {top:100px; left:100px; background:yellow;}75% {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}使用mymove動畫方法：
選擇器
{ animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome， infinite表示無限次循環(huán)，也可設(shè)置次數(shù)n： animation-interation-count:n*/ }總結(jié)：@keyframes與animation密切相關(guān)，如想透徹掌握，還需對照animation用法一起學習。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答
