位置:首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS3 動(dòng)畫屬性

提問人:劉團(tuán)圓發(fā)布時(shí)間:2020-11-19

1.@keyframes

    如果想要?jiǎng)?chuàng)建動(dòng)畫,那么就必須使規(guī)則。創(chuàng)建動(dòng)畫是通過逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。在動(dòng)畫過程中,可以多次更改CSS樣式的設(shè)走。指定的變化發(fā)生時(shí)使用%,或關(guān)鍵字“from”和“to1’,這是和0%到100%相同的。0%是開頭動(dòng)畫,100%是當(dāng)動(dòng)畫完成。

    為了獲得最佳的瀏覽器支持,應(yīng)該始終定義為0%和100%的選擇器。

2.animation

    所有動(dòng)畫屬性的簡寫屬性,除了animation-play-state屬性外,它們的語法如下:

    animation: name duration timing-function delay iteration-count direction fll-mode play-state;

3.animation-name

    animation-name屬性為@keyframes動(dòng)畫規(guī)定名稱,語法如下:

    animation-name: keyframename|none;

    該屬性有兩個(gè)參數(shù):

    ? keyframename:規(guī)定需要綁定到選擇器的keyframe的名稱。

    ? none:規(guī)定無動(dòng)畫效果(可用于覆蓋來自級(jí)聯(lián)的動(dòng)畫)。

4.animation-duration

    animation-duration屬性定義動(dòng)畫完成一個(gè)周期需要多少時(shí)間,單位是秒或毫秒,語法如下:

    animation-duration: time:

5.animation-timing-function

    animation-timing-function屬性指定動(dòng)畫將如何完成一個(gè)周期。速度曲線定義動(dòng)畫從一套CSS樣式變?yōu)榱硪惶證SS樣式所用的時(shí)間,速度曲線用于使變化更為平滑,語法如下:

    animatiion-tiTning-function: value :

    animation-timingHlinction使用的數(shù)學(xué)函數(shù)稱為三次貝塞爾曲線、速度曲線。使用此函數(shù)時(shí),可以使用自己的值或預(yù)先定義的值之一。

    animation-timing-function屬性的值可以是以下幾種:

    ?inear:動(dòng)畫從頭到尾的速度是相同的。

    ?ease:默認(rèn)。動(dòng)畫以低速開始,然后加快,在結(jié)束前變慢。

    ?ease-in:動(dòng)畫以低速開始。 o ease-out:動(dòng)畫以低速結(jié)束。 

    ?ease-in-out:動(dòng)畫以低速開始和結(jié)束。

    ?cubic-bezier(n,n,n,n):在cubic-bezie「函數(shù)中使用自己的值。可能的值是0~1的數(shù)值。

6.animation-delay

    animation-delay屬性定義動(dòng)畫什么時(shí)候開始,其值的單位可以是秒(s)或毫秒(ms)。

7.animation-iteration-count

    animation-iteration-count屬性定義動(dòng)畫應(yīng)該播放多少次,默認(rèn)值為1,屬性的值可以使以下 兩種:

    ? n:一個(gè)數(shù)字,定義應(yīng)該播放多少次動(dòng)畫。

    ? infinite:指定動(dòng)畫應(yīng)該播放無限次(永遠(yuǎn))。

8.animation-direction

    animation-direction屬性定義是否循環(huán)交替反向播放動(dòng)畫,默認(rèn)是normal,語法如下:

    animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit:

    animation-direction屬性的值可以使以下幾種:

    ? normal:默認(rèn)值,動(dòng)畫按正常播放。

    ? reverse:動(dòng)畫反向播放。

    ? alternate:動(dòng)畫在奇數(shù)次(1、3、5……)正向播放,在偶數(shù)次(2、4、6……)反向播放。

    ? alternate-reverse:動(dòng)畫在奇數(shù)次(1、3、5 )反向播放,在偶數(shù)次(2、4、6 )正向播放。

    ? Initial:設(shè)置該屬性為它的默認(rèn)值。

    ? Inherit:從父元素繼承該屬性。

9.animation-play-state

    animation-play-state屬性指定動(dòng)畫是否正在運(yùn)行或已暫停,默認(rèn)是running,語法如下:

    animation-play-state: paused|running;

    animation-play-state屬性的值可以是以下兩種: 

    ? paused:指定暫停動(dòng)畫。

    ? running:指定正在運(yùn)行的動(dòng)畫。

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部