CSS3 的動畫屬性

時間 2019-11-20

標籤 css3 css 動畫屬性欄目 CSS 简体版

原文原文鏈接

經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。css

㈠@keyframes 規則html

⑴瀏覽器支持web

Firefox 支持替代的 @-moz-keyframes 規則。瀏覽器

Opera 支持替代的 @-o-keyframes 規則。動畫

Safari 和 Chrome 支持替代的 @-webkit-keyframes 規則。spa

⑵定義和用法code

經過 @keyframes 規則，可以建立動畫。orm

建立動畫的原理是，將一套 CSS 樣式逐漸變化爲另外一套樣式。htm

在動畫過程當中，可以屢次改變這套 CSS 樣式。blog

以百分比來規定改變發生的時間，或者經過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。

0% 是動畫的開始時間，100% 動畫的結束時間。

爲了得到最佳的瀏覽器支持，應該始終定義 0% 和 100% 選擇器。

註釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。

⑶語法

@keyframes animationname {keyframes-selector{css-styles;}}

keyframes-selector：動畫時長的百分比。

合法的值：

0-100%
from（與 0% 相同）
to（與 100% 相同）

⑷代碼示例：

@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst /* Opera */ { from {background: red;} to {background: yellow;} }

㈡CSS3 動畫屬性

⑴全部屬性總結：

⑵屬性的具體語法與值的介紹

①animation-duration 屬性

1.語法：animation-duration：time

2.值：time：規定完成動畫所花費的時間。默認值是 0，意味着沒有動畫效果。

3.animation-duration 屬性定義動畫完成一個週期所須要的時間，以秒或毫秒計。

②animation-timing-function 屬性

**1.語法：animation-timing-function: value;**

2.animation-timing-function 規定動畫的速度曲線。速度曲線定義動畫從一套 CSS 樣式變爲另外一套所用的時間。

3.animation-timing-function 屬性值：

③animation-delay 屬性

**1.語法：animation-delay: time;**

2.值：time：可選。定義動畫開始前等待的時間，以秒或毫秒計。默認值是 0。

3.animation-delay 屬性定義動畫什麼時候開始。容許負值，-2s 使動畫立刻開始，但跳過 2 秒進入動畫。

④animation-iteration-count 屬性

1.語法：animation-iteration-count: n|infinite;

2.值：n：定義動畫播放次數的數值。 infinite：規定動畫應該無限次播放。

3.animation-iteration-count 屬性定義動畫的播放次數。

⑤animation-direction 屬性

1.語法：animation-direction: normal|alternate;

2.值：normal：默認值。動畫應該正常播放。 alternate：動畫應該輪流反向播放。

3.animation-direction 屬性定義是否應該輪流反向播放動畫。

4.若是 animation-direction 值是 "alternate"，則動畫會在奇數次數（一、三、5 等等）正常播放，而在偶數次數（二、四、6 等等）向後播放。

5.注意：若是把動畫設置爲只播放一次，則該屬性沒有效果。

⑥animation-play-state 屬性

1.語法：animation-play-state: paused|running;

2.值：paused：規定動畫已暫停。 running：規定動畫正在播放。

3.animation-play-state 屬性規定動畫正在運行仍是暫停。

⑦animation-fill-mode 屬性

1.語法：animation-fill-mode : none | forwards | backwards | both;

2.animation-fill-mode 屬性規定動畫在播放以前或以後，其動畫效果是否可見。

3.注意：其屬性值是由逗號分隔的一個或多個填充模式關鍵詞。

4.animation-fill-mode 屬性值：以下圖所示

㈢CSS3 動畫

在 @keyframes 中建立動畫時，把它捆綁到某個選擇器，不然不會產生動畫效果。

經過規定至少如下兩項 CSS3 動畫屬性，便可將動畫綁定到選擇器：

⑴規定動畫的名稱

⑵規定動畫的時長

示例：把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒：

㈣動畫屬性示例

⑴當動畫爲 25% 及 50% 時改變背景色，而後當動畫 100% 完成時再次改變：

<!DOCTYPE html> <html> <head> <style> div { width:300px; height:300px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst { 0% {background-color:red;} 25% {background-color:yellow;} 50% {background-color:blue;} 100% {background-color:green;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background-color:red; 25% {background-color:yellow;} 50% {background-color:blue;} 100% {background-color:green;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background-color:red;} 25% {background-color:yellow;}color 50% {background-color:blue;} 100% {background-color:green;} } @-o-keyframes myfirst /* Opera */ { 0% {background-color:red;} 25% {background-color:yellow;} 50% {background-color:blue;} 100% {background-color:green;} } </style> </head> <body> <div></div> <p><b>註釋：</b>在支持的瀏覽器中顯示，當動畫完成時，會變回初始的樣式。</p> </body> </html>

⑵改變背景色和位置：

<!DOCTYPE html> <html> <head> <style> div { width:400px; height:400px; background:red; position:relative; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body> <p><b>註釋：</b>動畫初始狀態紅色，像右移動200px黃色，向下移動200px藍色，向左移動200px綠色，向上移動200px紅色，回到起點。</p> <div></div> </body> </html>

⑶名爲myfirst的動畫，等待2s後，以勻速開始播放動畫，播放一個週期爲5s，以後動畫開始輪流反向播放一個5s的週期，動畫無限次循環播放。

<!DOCTYPE html> <html> <head> <style> div { width:260px; height:260px; background:red; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Firefox: */ -moz-animation-name:myfirst; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-delay:2s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; /* Opera: */ -o-animation-name:myfirst; -o-animation-duration:5s; -o-animation-timing-function:linear; -o-animation-delay:2s; -o-animation-iteration-count:infinite; -o-animation-direction:alternate; -o-animation-play-state:running; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body> <p><b>註釋：</b>名爲myfirst的動畫，等待2s後，以勻速開始播放動畫，播放一個週期爲5s，以後動畫開始輪流反向播放一個5s的週期，動畫無限次循環播放。</p> <div></div> </body> </html>

⑷鼠標放在動畫上，以5s爲週期進行播放，當鼠標放上動畫開始，鼠標離開動畫截止回到原始狀態。

但願有所幫助。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。