亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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的特性；

總結(jié)

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

相關(guān)文章

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

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

  • 淺談html5標(biāo)簽css3的常用樣式

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

  • css 常用樣式(分享)

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

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

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

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

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

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

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

最新評論