css3 animation(動畫)屬性

2021-08-20 10:17:25 字數 1067 閱讀 5032

css3   animation(動畫)屬性

1.animation: name duration timing-function delay iteration-count direction fill-mode play-state(所有屬性集合)

2.animation-name屬性值:繫結動畫名(@keyframes名)

3.animation-duration屬性值:time。(5s)

4.animation-timing-function屬性值:

5.animation-delay屬性值:time。(5s)

6.animation-iteration-count屬性值:

7.animation-direction屬性值:

alternate-------奇數次正向播,偶數次反向播

alternate-reverse-------奇數次反向播,偶數次正向播

initia-------預設屬性

inherit-------從父級繼承

8.animation-play-state屬性值:

配合@keyframes使用

語法如下

//1.也可以寫成這樣

@keyframes

mymove

to }

//2.也可以寫成這樣

@keyframes

mymove

25%

50%

75%

100%

} 小例子:(以改變寬度為例)

.div1

/* 規定動畫。 */

@keyframes

mymove

25%

50%

75%

100%

}

CSS3 animation 關鍵幀 動畫

動畫 animation 首先定義一套關鍵幀 方法 keyframes 動畫名稱 25 50 75 100 注 可以從0 一直設定到100 然後呼叫 動畫名稱 方法 animation 1s 2s 動畫名稱 運動方式 動畫執行的次數 第乙個值 運動的總時間 第二個值 延遲的運動時間 第三個值 動畫名...

深入理解CSS3 Animation 幀動畫

css3我在5年之前就有用了,包括公司專案都一直在很前沿的技術。最近在寫慕課網的七夕主題,用了大量的css3動畫,但是真的沉澱下來仔細的去深入css3動畫的各個屬性發現還是很深的,這裡就寫下關於幀動畫steps屬性的理解 我們知道css3的animation有八個屬性 animation name ...

深入理解CSS3 Animation 幀動畫

我們知道css3的animation有八個屬性 animation name animation duration animation delay animation iteration count animation direction animation play state animation...