英 [fre?mz]? ?美 [fre?mz]??
n.邊框;框架( frame的名詞復(fù)數(shù) );眼鏡框;組織
css @keyframes屬性 語法
@keyframes是什么?
@keyframes是CSS的一種規(guī)則,可以用來定義CSS動(dòng)畫的一個(gè)周期的行為,創(chuàng)建簡(jiǎn)單的動(dòng)畫。
作用:通過 @keyframes 規(guī)則,您能夠創(chuàng)建動(dòng)畫。
說明:創(chuàng)建動(dòng)畫的原理是,將一套 CSS 樣式逐漸變化為另一套樣式。在動(dòng)畫過程中,您能夠多次改變這套 CSS 樣式。以百分比來規(guī)定改變發(fā)生的時(shí)間,或者通過關(guān)鍵詞 "from" 和 "to",等價(jià)于 0% 和 100%。0% 是動(dòng)畫的開始時(shí)間,100% 動(dòng)畫的結(jié)束時(shí)間。為了獲得最佳的瀏覽器支持,您應(yīng)該始終定義 0% 和 100% 選擇器。
注釋:請(qǐng)使用動(dòng)畫屬性來控制動(dòng)畫的外觀,同時(shí)將動(dòng)畫與選擇器綁定。
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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例