本篇文章帶給大家的內容是關於呼叫動畫animation-name屬性怎麼用? animation-name屬性詳解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
animation-name屬性:
在CSS3中,使用@keyframes規則定義的動畫並不會自動執行,我們還需要使用animation-name屬性來呼叫動畫,之後動畫才會生效。
語法:
animation-name:動畫名稱;
說明:
注意,animation-name 呼叫的動畫名稱需要和@keyframes規則定義的動畫名稱完全一致(區分大小寫),如果不一致將不具有任何動畫效果。為了瀏覽器相容性,針對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規則定義了2個動畫:mycolor和mytransform。但我們只使用animation-name來呼叫動畫名為mytransform的動畫。因此,名為mytransform的動畫就會生效,而名為mycolor的動畫不會生效。
在mytransform動畫中,0%到50%的之間div元素border-radius屬性值實作從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);} }
初學者往往會有疑問,每次我們都是定義:hover偽類定義滑鼠移動到元素上時,動畫才開始,如果我們想要打開網頁的第一時間動畫就能自動執行,那該怎麼辦呢?
其實很簡單,我們去掉滑鼠指標停留在div元素上時的樣式,並把樣式中的程式碼改寫為div元素本身的樣式,成為如下所示的程式碼,則動畫將在頁面打開時就立刻進行播放。
div { width:100px; height:100px; background-color:red; -webkit-animation-name:mytransform; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; }
以上就是對呼叫動畫animation-name屬性怎麼用? animation-name屬性詳解的完整介紹,如果您想了解更多有關CSS3教程,請關注PHP中文網。
以上是呼叫動畫animation-name屬性怎麼用? animation-name屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!