調(diào)用動畫animation-name屬性如何使用?這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
目前創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、大興安嶺網(wǎng)站維護(hù)等服務(wù),公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
animation-name屬性:
在CSS3中,使用@keyframes規(guī)則定義的動畫并不會自動執(zhí)行,我們還需要使用animation-name屬性來調(diào)用動畫,之后動畫才會生效。
語法:
animation-name:動畫名;
說明:
注意,animation-name 調(diào)用的動畫名需要和@keyframes規(guī)則定義的動畫名稱完全一致(區(qū)分大小寫),如果不一致將不具有任何動畫效果。為了瀏覽器兼容性,針對Chrome和Safari瀏覽器需要加上-webkit-前綴,而針對Firefox瀏覽器需要加上-moz-。
代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 animation-name屬性</title> <style type="text/css"> @-webkit-keyframes mycolor { 0%{background-color:red;} 30%{background-color:blue;} 60%{background-color:yellow;} 100%{background-color:green;} } @-webkit-keyframes mytransform { 0%{border-radius:0;} 50%{border-radius:50px; -webkit-transform:translateX(0);} 100%{border-radius:50px; -webkit-transform:translateX(50px);} } div { width:100px; height:100px; background-color:red; } div:hover { -webkit-animation-name:mytransform; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; } </style> </head> <body> <div></div> </body> </html>
效果如下:
分析:
這里我使用@keyframes規(guī)則定義了2個動畫:mycolor和mytransform。但是我們只使用animation-name調(diào)用動畫名為mytransform的動畫。因此,名為mytransform的動畫就會生效,而名為mycolor的動畫不會生效。
在mytransform動畫中,0%到50%的之間div元素border-radius屬性值實現(xiàn)從0變成50px,然后在50%到100%之間保持border-radius屬性值不變并且水平向右移動50px。
方式(1):
@-webkit-keyframes mytransform { 0%{border-radius:0;} 50%{border-radius:50px;-webkit-transform:translateX(0);} 100%{-webkit-transform:translateX(50px);} }
方式(2):
@-webkit-keyframes mytransform { 0%{border-radius:0;} 50%{border-radius:50px;} 100%{-webkit-transform:translateX(50px);} }
初學(xué)者往往都會有疑問,每次我們都是定義:hover偽類 定義鼠標(biāo)移動到元素上時,動畫才開始,假如我們想要打開網(wǎng)頁的第一時間動畫就能自動執(zhí)行,那該怎么辦呢?
其實很簡單,我們?nèi)コ髽?biāo)指針停留在div元素上時的樣式,并把樣式中的代碼改寫為div元素本身的樣式,成為如下所示的代碼,則動畫將在頁面打開時就立刻進(jìn)行播放。
div { width:100px; height:100px; background-color:red; -webkit-animation-name:mytransform; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; }
感謝各位的閱讀!看完上述內(nèi)容,你們對調(diào)用動畫animation-name屬性如何使用大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前名稱:調(diào)用動畫animation-name屬性如何使用
瀏覽地址:http://muchs.cn/article30/pdpsso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、網(wǎng)站導(dǎo)航、電子商務(wù)、品牌網(wǎng)站設(shè)計、全網(wǎng)營銷推廣、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)