欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2020-08-11 15:13:57   作者：zm_1688   我要評論
這篇文章主要介紹了css動畫效果之a(chǎn)nimation的常用樣式，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧

animation動畫

定義一個動畫：

/*設置一個關鍵幀，定義動畫每一步執(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);}
        }
/*引用關鍵幀，設置動畫的執(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ù)

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

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

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

總結(jié)

到此這篇關于css動畫效果之a(chǎn)nimation的常用樣式的文章就介紹到這了,更多相關css animation的常用樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • css常用樣式font設置字體的多種變換(實例詳解)

    這篇文章主要介紹了css常用樣式font設置字體的多種變換,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-02-19

  • 淺談html5標簽css3的常用樣式

    下面小編就為大家?guī)硪黄獪\談html5標簽css3的常用樣式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-20

  • css 常用樣式(分享)

    下面小編就為大家?guī)硪黄猚ss 常用樣式(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-11

  • 20個CSS/CSS3常用樣式匯總

    這里我總結(jié)了一下平時自己在項目中經(jīng)常用到的20個CSS常用的樣式，都是些個人的經(jīng)驗，這里分享給大家，希望對大家有所幫助
    2014-09-02

  • CSS常用樣式簡單的總結(jié)包括定位、顯示等屬性

    CSS常用樣式包括定位、顯示、寬高和剪裁等屬性，這些都是我們大家經(jīng)常使用到的，在本文做個總結(jié)，以備不時之需
    2014-04-18

  • CSS常用樣式之繪制雙箭頭的示例代碼

    這篇文章主要介紹了CSS常用樣式之繪制雙箭頭的示例代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-08-31

最新評論