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

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

animation動畫

定義一個(gè)動畫：

/*設(shè)置一個(gè)關(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ù)的時(shí)間

animation-delay:規(guī)定多長時(shí)間后出現(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)注億速云行業(yè)資訊頻道。