小編給大家分享一下css中的animation-name屬性怎么用,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),赤峰企業(yè)網(wǎng)站建設(shè),赤峰品牌網(wǎng)站建設(shè),網(wǎng)站定制,赤峰網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,赤峰網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
css3animation-name屬性
作用:animation-name屬性為@keyframes動(dòng)畫規(guī)定名稱。
語法:
animation-name:keyframename|none;
keyframename:規(guī)定需要綁定到選擇器的keyframe的名稱。
none:規(guī)定無動(dòng)畫效果(可用于覆蓋來自級聯(lián)的動(dòng)畫)。
注:需始終設(shè)置animation-duration屬性,否則當(dāng)時(shí)長為0時(shí),就不會(huì)播放動(dòng)畫了。
css3animation-name屬性的使用示例
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;
/*SafariandChrome*/
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}
@keyframesmymove
{
from{left:0px;}
to{left:200px;}
}
@-webkit-keyframesmymove/*SafariandChrome*/
{
from{left:0px;}
to{left:200px;}
}
注釋:InternetExplorer9以及更早的版本不支持animation-name屬性。
注釋:始終規(guī)定animation-duration屬性,否則時(shí)長為0,就不會(huì)播放動(dòng)畫了。
看完了這篇文章,相信你對“css中的animation-name屬性怎么用”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!