css動畫效果之a(chǎn)nimation的常用樣式有哪些

這篇文章主要為大家展示了css動畫效果之a(chǎn)nimation的常用樣式有哪些，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“css動畫效果之a(chǎn)nimation的常用樣式有哪些”這篇文章吧。

隆林網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)公司2013年至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

animation動畫

定義一個動畫：

/*設(shè)置一個關(guān)鍵幀，定義動畫每一步執(zhí)行的動作*/
@keyframes mybox{
            0%{transform: translate(0,0);}
            25%{transform: translate(200px,0);}
            50%{transform: translate(200px,200px);}
            75%{transform: translate(0,200px);}
            100%{transform: translate(0,0);}
        }

/*引用關(guān)鍵幀，設(shè)置動畫的執(zhí)行樣式*/
animation: mybox 5s 1s infinite;

注：

1、動畫結(jié)束后回到初始位置。
2、from->0%    to ->100%

animation-name: 動畫的名字，（必須存在）

animation-duration: 動畫持續(xù)的時間

animation-delay:規(guī)定多長時間后出現(xiàn)動畫效果

animation-iteration-count: 定義動畫執(zhí)行的次數(shù)

默認(rèn)值是：1； 無限次數(shù)：infinite

animation-timing-function: 定義動畫的效果animation-fill-mode:

none:默認(rèn)值；  樣式在延遲之后生效；
backwards：  樣式在延遲之前生效；
forwards： 在動畫結(jié)束之后，停在終點(diǎn)位置；
both:  具備backwards和forwards的特性；

以上就是關(guān)于“css動畫效果之a(chǎn)nimation的常用樣式有哪些”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：css動畫效果之a(chǎn)nimation的常用樣式有哪些
URL鏈接：http://m.jiaotiyi.com/article/psecgj.html