css動(dòng)畫效果之a(chǎn)nimation的常用樣式
發(fā)布時(shí)間：2020-08-11 15:13:57 作者：zm_1688 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css動(dòng)畫效果之a(chǎn)nimation的常用樣式，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
animation動(dòng)畫
定義一個(gè)動(dòng)畫：
/*設(shè)置一個(gè)關(guān)鍵幀，定義動(dòng)畫每一步執(zhí)行的動(dòng)作*/
@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è)置動(dòng)畫的執(zhí)行樣式*/ animation: mybox 5s 1s infinite;
注：
1、動(dòng)畫結(jié)束后回到初始位置。
2、from->0% to ->100%
animation-name: 動(dòng)畫的名字，（必須存在）
animation-duration: 動(dòng)畫持續(xù)的時(shí)間
animation-delay:規(guī)定多長(zhǎng)時(shí)間后出現(xiàn)動(dòng)畫效果
animation-iteration-count: 定義動(dòng)畫執(zhí)行的次數(shù)
默認(rèn)值是：1； 無限次數(shù)：infinite
animation-timing-function: 定義動(dòng)畫的效果animation-fill-mode:
none:默認(rèn)值； 樣式在延遲之后生效；
backwards： 樣式在延遲之前生效；
forwards： 在動(dòng)畫結(jié)束之后，停在終點(diǎn)位置；
both: 具備backwards和forwards的特性；
總結(jié)
到此這篇關(guān)于css動(dòng)畫效果之a(chǎn)nimation的常用樣式的文章就介紹到這了,更多相關(guān)css animation的常用樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css常用樣式font設(shè)置字體的多種變換(實(shí)例詳解)
這篇文章主要介紹了css常用樣式font設(shè)置字體的多種變換,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-19- 下面小編就為大家?guī)硪黄獪\談html5標(biāo)簽css3的常用樣式。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-20
- 下面小編就為大家?guī)硪黄猚ss 常用樣式(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-11
- 這里我總結(jié)了一下平時(shí)自己在項(xiàng)目中經(jīng)常用到的20個(gè)CSS常用的樣式，都是些個(gè)人的經(jīng)驗(yàn)，這里分享給大家，希望對(duì)大家有所幫助2014-09-02
CSS常用樣式簡(jiǎn)單的總結(jié)包括定位、顯示等屬性
CSS常用樣式包括定位、顯示、寬高和剪裁等屬性，這些都是我們大家經(jīng)常使用到的，在本文做個(gè)總結(jié)，以備不時(shí)之需2014-04-18
這篇文章主要介紹了CSS常用樣式之繪制雙箭頭的示例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-31
