animation-* · CSS基礎

## animation 屬性 animation屬性是六個動畫屬性的速記屬性： * animation-name * animation-duration * animation-timing-function * animation-delay * animation-iteration-count * animation-direction 注釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。 |默認值：|none 0 ease 0 1 normal| | --- | --- | |繼承性：|no| |JavaScript 語法：|object.style.animation="mymove 5s infinite"| 語法 ~~~ animation: name duration timing-function delay iteration-count direction; ~~~ | 值 | 描述 | | --- | --- | | *[animation-name](https://www.w3cschool.cn/cssref/pr-animation-name.html "CSS3 animation-name 屬性")* | 規定需要綁定到選擇器的 keyframe 名稱。。 | | *[animation-duration](https://www.w3cschool.cn/cssref/pr-animation-duration.html "CSS3 animation-duration 屬性")* | 規定完成動畫所花費的時間，以秒或毫秒計。 | | *[animation-timing-function](https://www.w3cschool.cn/cssref/pr-animation-timing-function.html "CSS3 animation-timing-function 屬性")* | 規定動畫的速度曲線。 | | *[animation-delay](https://www.w3cschool.cn/cssref/pr-animation-delay.html "CSS3 animation-delay 屬性")* | 規定在動畫開始之前的延遲。 | | *[animation-iteration-count](https://www.w3cschool.cn/cssref/pr-animation-iteration-count.html "CSS3 animation-iteration-count 屬性")* | 規定動畫應該播放的次數。 | | *[animation-direction](https://www.w3cschool.cn/cssref/pr-animation-direction.html "CSS3 animation-direction 屬性")* | 規定是否應該輪流反向播放動畫。 | 實例 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 屬性。</p> <div></div> </body> </html> ``` ## animation-delay 屬性 animation-delay 屬性定義動畫什么時候開始。 animation-delay 值單位可以是秒（s）或毫秒（ms）。 **提示**:允許負值，-2s 使動畫馬上開始，但跳過 2 秒進入動畫。 JavaScript 語法:object object.style.animationDelay="2s" * * * 語法 ~~~ animation-delay: time; ~~~ | 值 | 描述 | 測試 | | :-- | :-- | :-- | | *time* | 可選。定義動畫開始前等待的時間，以秒或毫秒計。默認值為0 | [測試 ?](https://www.w3cschool.cn/tryrun/showhtml/trycss3_animation-delay) | 實例 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; animation-delay:2s; /*Safari and Chrome*/ -webkit-animation:mymove 5s infinite; -webkit-animation-delay:2s; } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注意:</strong> animation-delay 屬性不兼容Internet Explorer 9 以及更早版本的瀏覽器</p> <div></div> </body> </html> ``` ## animation-direction 屬性 animation-direction：屬性控制如何在`reverse`或`alternate`周期播放動畫。如果 animation-direction 值是 "alternate"，則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等）向后播放。注釋：如果把動畫設置為只播放一次，則該屬性沒有效果。 JavaScript 語法：object.style.animationDirection="alternate" ## 語法 ~~~ animation-direction: normal|reverse|alternate|alternate-reverse; ~~~ normal以正常的方式播放動畫 reverse以相反方向播放動畫  alternate播放動畫作為正常每奇數時間（1,3,5等）和反方向每偶數時間（2,4,6，等...） alternate-reverse在每個奇數時間（1,3,5等）在相反方向上播放動畫，并且在每個偶數時間（2,4,6等等）的正常方向上播放動畫  ## 實例 ``` <!DOCTYPE html> <html> <head> <title>W3Cschool(w3cschool.cn)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite; animation-direction:alternate; /* Safari and Chrome */ -webkit-animation:myfirst 5s infinite; -webkit-animation-direction:alternate; } @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;} } @-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;} } </style> </head> <body> <p><strong>注釋：</strong>Internet Explorer 9 以及更早的版本不支持 animation-direction 屬性。</p> <div></div> </body> </html> ``` ## animation-duration 屬性 animation-duration：定義動畫完成一個周期需要多少秒或毫秒。 JavaScript 語法:object object.style.animationDuration="3s" ## 語法 ~~~ animation-duration: time; ~~~ time設置一個動畫周期的時間間隔（以秒或毫秒為單位）。默認值為0，表示不會有動畫 * * * ## 實例 ``` <html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove infinite; animation-duration:2s; /* Safari and Chrome */ -webkit-animation:mymove infinite; -webkit-animation-duration:2s; } @keyframes mymove { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <p><strong>注意:</strong> animation-duration屬性不兼容 Internet Explorer 9 以及更早版本的瀏覽器.</p> <div></div> <p><b>注意:</b> 要指定動畫屬性。否則時間若是0,動畫不會進行。</p> </body> </html> ``` ## animation-fill-mode 屬性 animation-fill-mode：設置樣式以在動畫不播放時應用元素。注釋：其屬性值是由逗號分隔的一個或多個填充模式關鍵詞。 JavaScript 語法：object.style.animationFillMode=none 語法 ~~~ animation-fill-mode: none|forwards|backwards|both|initial|inherit; ~~~ | 值 | 描述 | | --- | --- | | none | 默認值。無樣式 | | forwards | 動畫結束后，使用元素的結束屬性值。 | | backwards | 使用元素的起始值。 | | both | 動畫將遵循向前和向后的規則。 | ## animation-name 屬性 animation-name 屬性為 @keyframes 動畫規定名稱。注釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。默認值：none繼承性：no版本：CSS3JavaScript 語法：object.style.animationName="mymove" ## * * * 語法 ~~~ animation-name: keyframename|none; ~~~ | 值 | 描述 | | --- | --- | | *keyframename* | 規定需要綁定到選擇器的 keyframe 的名稱。 | | none | 規定無動畫效果（可用于覆蓋來自級聯的動畫）。 | ## animation-play-state 屬性 animation-play-state：設置是否運行或暫停動畫。注釋：您可以在 JavaScript 中使用該屬性，這樣就能在播放過程中暫停動畫。 JavaScript 語法：object.style.animationPlayState="paused" ## 語法 ~~~ animation-play-state: paused|running; ~~~ | 值 | 描述 | 測試 | | --- | --- | --- | | paused | 動畫已暫停。 | [測試](https://www.w3cschool.cn/tryrun/showhtml/css3_animation-play-pause) | | running | 默認值，動畫正在運行。 | [測試](https://www.w3cschool.cn/tryrun/showhtml/css3_animation-play-running) | ## animation-timing-function 屬性 animation-timing-function：指定動畫速度曲線。速度曲線定義動畫從一套 CSS 樣式變為另一套所用的時間。速度曲線用于使變化更為平滑。 JavaScript 語法:object object.style.animationTimingFunction="linear" ## 語法 ~~~ animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n); ~~~ | 值 | 描述 | 測試 | | --- | --- | --- | | linear | 動畫從開始到結束具有相同的速度。 | [測試](https://www.w3cschool.cn/statics/demosource/Playit/Playit2.html#linear) | | ease | 動畫有一個緩慢的開始，然后快，結束慢。 | [測試](https://www.w3cschool.cn/statics/demosource/Playit/Playit2.html#ease) | | ease-in | 動畫有一個緩慢的開始。 | [測試](https://www.w3cschool.cn/statics/demosource/Playit/Playit2.html#ease-in) | | ease-out | 動畫結束緩慢。 | [測試](https://www.w3cschool.cn/statics/demosource/Playit/Playit2.html#ease-out) | | ease-in-out | 動畫具有緩慢的開始和慢的結束。 | [測試](https://www.w3cschool.cn/statics/demosource/Playit/Playit2.html#ease-in-out) | | cubic-bezier(*n*,*n*,*n*,*n*) | 在立方貝塞爾函數中定義速度函數。可能的值是從0到1的數字值。 | ? | **實例1--從開始到結束以相同的速度播放動畫:** ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; animation-timing-function:linear; /* Safari and Chrome */ -webkit-animation:mymove 5s infinite; -webkit-animation-timing-function:linear; } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注意:</strong> animation-timing-function 屬性不兼容 Internet Explorer 9 以及更早版本的瀏覽器.</p> <div></div> </body> </html> ``` **為了更好地理解不同的定時函數值，這里提供了設置五個不同值的五個不同的 div 元素：** ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> div { width:100px; height:50px; background:red; color:white; font-weight:bold; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ } #div1 {animation-timing-function:linear;} #div2 {animation-timing-function:ease;} #div3 {animation-timing-function:ease-in;} #div4 {animation-timing-function:ease-out;} #div5 {animation-timing-function:ease-in-out;} /* Safari and Chrome: */ #div1 {-webkit-animation-timing-function:linear;} #div2 {-webkit-animation-timing-function:ease;} #div3 {-webkit-animation-timing-function:ease-in;} #div4 {-webkit-animation-timing-function:ease-out;} #div5 {-webkit-animation-timing-function:ease-in-out;} @keyframes mymove { from {left:0px;} to {left:300px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {left:0px;} to {left:300px;} } </style> </head> <body> <p><strong>注意:</strong> animation-timing-funtion屬性不兼容 Internet Explorer 9以及更早版本的瀏覽器</p> <div id="div1">linear</div> <div id="div2">ease</div> <div id="div3">ease-in</div> <div id="div4">ease-out</div> <div id="div5">ease-in-out</div> </body> </html> ``` **與上例相同，但是通過 cubic-bezier 函數來定義速度曲線：** ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> div { width:100px; height:50px; background:red; color:white; font-weight:bold; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ } #div1 {animation-timing-function:cubic-bezier(0,0,0.25,1);} #div2 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);} #div3 {animation-timing-function:cubic-bezier(0.42,0,1,1);} #div4 {animation-timing-function:cubic-bezier(0,0,0.58,1);} #div5 {animation-timing-function:cubic-bezier(0.42,0,0.58,1);} /* Safari and Chrome: */ #div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);} #div2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);} #div3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);} #div4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);} #div5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);} @keyframes mymove { from {left:0px;} to {left:300px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {left:0px;} to {left:300px;} } </style> </head> <body> <p><strong>注意:</strong> animation-timing-function 屬性不兼容 Internet Explorer 9 以及更早版本的瀏覽器.</p> <div id="div1">linear</div> <div id="div2">ease</div> <div id="div3">ease-in</div> <div id="div4">ease-out</div> <div id="div5">ease-in-out</div> </body> </html> ```