介紹

這是一個(gè)實(shí)驗(yàn)中的功能，此功能某些瀏覽器尚在開(kāi)發(fā)中。

CSS animations 使得可以將從一個(gè) CSS 樣式配置轉(zhuǎn)換到另一個(gè) CSS 樣式配置。

動(dòng)畫(huà)包括兩個(gè)部分：

描述動(dòng)畫(huà)的樣式規(guī)則。
用于指定動(dòng)畫(huà)開(kāi)始、結(jié)束以及中間點(diǎn)樣式的關(guān)鍵幀。

CSS 動(dòng)畫(huà)有三個(gè)主要優(yōu)點(diǎn)：

能夠非常容易地創(chuàng)建簡(jiǎn)單動(dòng)畫(huà)，你甚至不需要了解 JavaScript 就能創(chuàng)建動(dòng)畫(huà)。
動(dòng)畫(huà)運(yùn)行效果良好，甚至在低性能的系統(tǒng)上。渲染引擎會(huì)使用跳幀或者其他技術(shù)以保證動(dòng)畫(huà)表現(xiàn)盡可能的流暢。而使用 JavaScript 實(shí)現(xiàn)的動(dòng)畫(huà)通常表現(xiàn)不佳（除非經(jīng)過(guò)很好的設(shè)計(jì)）。
讓瀏覽器控制動(dòng)畫(huà)序列，允許瀏覽器優(yōu)化性能和效果，如降低位于隱藏選項(xiàng)卡中的動(dòng)畫(huà)更新頻率。

配置動(dòng)畫(huà)

創(chuàng)建動(dòng)畫(huà)序列，需要使用 animation 屬性或其子屬性，該屬性允許配置動(dòng)畫(huà)時(shí)間、時(shí)長(zhǎng)以及其他動(dòng)畫(huà)細(xì)節(jié)，但該屬性不能配置動(dòng)畫(huà)的實(shí)際表現(xiàn)，動(dòng)畫(huà)的實(shí)際表現(xiàn)是由 @keyframes規(guī)則實(shí)現(xiàn)。

屬性 `animation`

用來(lái)指定一組或多組動(dòng)畫(huà)，每組之間用逗號(hào)相隔。

是一個(gè)簡(jiǎn)寫(xiě)屬性，包含以下屬性：

animation-name：初始值為none,
animation-duration：初始值為0s
animation-timing-function：初始值為ease
animation-delay：初始值為0s
animation-iteration-count：初始值為1
animation-direction：初始值為normal
animation-fill-mode：初始值為none
animation-play-state：初始值為running
animation-timeline：初始值為 auto

`animation` 語(yǔ)法 :

animation = 
  <single-animation>#  

<single-animation> = 
  <time>                              ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]         

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse  

<single-animation-fill-mode> = 
  none       |
  forwards   |
  backwards  |
  both       

<single-animation-play-state> = 
  running  |
  paused   

<keyframes-name> = 
  <custom-ident>  |
  <string>        

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                                |
  step-end                                  |
  steps( <integer> [, <step-position> ]? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}

?
?

屬性 `animation-name`

為一系列動(dòng)畫(huà)命名，每個(gè)名稱(chēng)代表一個(gè)由@keyframes定義的動(dòng)畫(huà)序列。

語(yǔ)法：

animation-name = 
  [ none | <keyframes-name> ]#  

<keyframes-name> = 
  <custom-ident>  |
  <string>

none：特殊關(guān)鍵字，表示無(wú)關(guān)鍵幀?？梢圆桓淖兤渌麡?biāo)識(shí)符的順序而使動(dòng)畫(huà)失效，或者使層疊的動(dòng)畫(huà)樣式失效。

語(yǔ)法示例：

關(guān)鍵字：
animation-name: none; 
單個(gè)名稱(chēng)：
animation-name: test_05; 
多個(gè)名稱(chēng)：
animation-name: test1, animation4; 

/* Global values */
animation-name: initial
animation-name: inherit
animation-name: unset

?
?

屬性 `animation-duration`

實(shí)驗(yàn)中的功能，指定一個(gè)動(dòng)畫(huà)周期的時(shí)長(zhǎng)。

語(yǔ)法：

animation-duration = 
  <time [0s,∞]>#

<time>：一個(gè)動(dòng)畫(huà)周期的時(shí)長(zhǎng)，單位為秒 (s) 或者毫秒 (ms)，無(wú)單位值無(wú)效。

語(yǔ)法示例：

animation-duration: 6s
animation-duration: 10s, 30s, 230ms

?
?

屬性 `animation-timing-function`

定義 CSS 動(dòng)畫(huà)在每一動(dòng)畫(huà)周期中執(zhí)行的節(jié)奏?？赡苤禐橐换蚨鄠€(gè)<timing-function> ｜ <esaing-funtion>。

語(yǔ)法：

animation-timing-function = 
  <easing-function>#  

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                                |
  step-end                                  |
  steps( <integer> [, <step-position> ]? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}

取值

系統(tǒng)預(yù)定義動(dòng)畫(huà)的值：

linear：動(dòng)畫(huà)從頭到尾的速度是相同的。
ease：默認(rèn)。動(dòng)畫(huà)以低速開(kāi)始，然后加快，在結(jié)束前變慢。
ease-in：動(dòng)畫(huà)以低速開(kāi)始。
ease-out：動(dòng)畫(huà)以低速結(jié)束。
ease-in-out：動(dòng)畫(huà)以低速開(kāi)始和結(jié)束。

自定義動(dòng)畫(huà)的值：

cubic-bezier(x1,y1,x2,y2)：三次貝塞爾曲線(xiàn)函數(shù)，取值范圍[0,1]，系統(tǒng)預(yù)定義動(dòng)畫(huà)是基于此函數(shù)來(lái)實(shí)現(xiàn)的。詳情戳CSS 數(shù)據(jù)類(lèi)型 - <easing/timing-funtion>篇。

逐幀動(dòng)畫(huà)的值：

steps(n, start/end)：n表示動(dòng)畫(huà)將分幾步執(zhí)行完畢，start/end表示動(dòng)畫(huà)發(fā)生變化的時(shí)間點(diǎn)，默認(rèn)是end。詳情戳CSS 數(shù)據(jù)類(lèi)型 - <easing/timing-funtion>篇。

分段線(xiàn)性函數(shù)的值：

linear()：大部分瀏覽器都不支持。可以在點(diǎn)之間進(jìn)行線(xiàn)性插值，讓你能夠近似地模擬更復(fù)雜的動(dòng)畫(huà)，比如反彈和彈性效果。
linear()函數(shù)的一個(gè)典型用途是提供許多點(diǎn)來(lái)創(chuàng)建曲線(xiàn)的錯(cuò)覺(jué)。
- 例如：linear(0, 0.25, 1)。這個(gè)linear()函數(shù)生成的緩動(dòng)函數(shù)從0、0.25再到1線(xiàn)性移動(dòng)。
- 例如：linear(0,0.25 75%， 1)。這個(gè)線(xiàn)性緩動(dòng)函數(shù)花費(fèi)75%的時(shí)間從0過(guò)渡到。25，最后25%的時(shí)間從。25過(guò)渡到。1。

?
?

屬性 `animation-delay`

實(shí)驗(yàn)中的功能。定義動(dòng)畫(huà)于何時(shí)開(kāi)始，即從動(dòng)畫(huà)應(yīng)用在元素上到動(dòng)畫(huà)開(kāi)始的這段時(shí)間的長(zhǎng)度。

語(yǔ)法：

animation-delay = 
  [ <'animation-delay-start'> <'animation-delay-end'>? | 
  <timeline-range-name> ]#

語(yǔ)法示例：

animation-delay: 3s;
animation-delay: 2s, 4ms;

?
?

屬性 `animation-iteration-count`

實(shí)驗(yàn)中的功能。定義動(dòng)畫(huà)在結(jié)束前運(yùn)行的次數(shù) 可以是 1 次無(wú)限循環(huán)。

如果指定了多個(gè)值，每次播放動(dòng)畫(huà)時(shí)，將使用列表中的下一個(gè)值，在使用最后一個(gè)值后循環(huán)回第一個(gè)值。

語(yǔ)法：

animation-iteration-count = 
  <single-animation-iteration-count>#  

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>

infinite：無(wú)限循環(huán)播放動(dòng)畫(huà)。
<number>：動(dòng)畫(huà)播放的次數(shù)；默認(rèn)值為1?？梢杂眯?shù)定義循環(huán)，來(lái)播放動(dòng)畫(huà)周期的一部分：例如，0.5 將播放到動(dòng)畫(huà)周期的一半。不可為負(fù)值。

語(yǔ)法示例：

/* 值為關(guān)鍵字 */
animation-iteration-count: infinite;

/* 值為數(shù)字 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* 指定多個(gè)值 */
animation-iteration-count: 2, 0, infinite;

?
?

屬性 `animation-direction`

實(shí)驗(yàn)中的功能。指示動(dòng)畫(huà)是否反向播放。

語(yǔ)法：

animation-direction = 
  <single-animation-direction>#  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse

normal：每個(gè)循環(huán)內(nèi)動(dòng)畫(huà)向前循環(huán)，換言之，每個(gè)動(dòng)畫(huà)循環(huán)結(jié)束，動(dòng)畫(huà)重置到起點(diǎn)重新開(kāi)始，這是默認(rèn)屬性。
alternate：動(dòng)畫(huà)交替反向運(yùn)行，反向運(yùn)行時(shí)，動(dòng)畫(huà)按步后退，同時(shí)，帶時(shí)間功能的函數(shù)也反向，比如，ease-in 在反向時(shí)成為 ease-out。計(jì)數(shù)取決于開(kāi)始時(shí)是奇數(shù)迭代還是偶數(shù)迭代
reverse：反向運(yùn)行動(dòng)畫(huà)，每周期結(jié)束動(dòng)畫(huà)由尾到頭運(yùn)行。
alternate-reverse：反向交替，反向開(kāi)始交替。動(dòng)畫(huà)第一次運(yùn)行時(shí)是反向的，然后下一次是正向，后面依次循環(huán)。決定奇數(shù)次或偶數(shù)次的計(jì)數(shù)從 1 開(kāi)始。

語(yǔ)法示例：

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

?
?

屬性 `animation-fill-mode`

設(shè)置 CSS 動(dòng)畫(huà)在執(zhí)行之前和之后如何將樣式應(yīng)用于其目標(biāo)。

語(yǔ)法：

animation-fill-mode = 
  <single-animation-fill-mode>#  

<single-animation-fill-mode> = 
  none       |
  forwards   |
  backwards  |
  both

none：當(dāng)動(dòng)畫(huà)未執(zhí)行時(shí)，動(dòng)畫(huà)將不會(huì)將任何樣式應(yīng)用于目標(biāo)，而是已經(jīng)賦予給該元素的 CSS 規(guī)則來(lái)顯示該元素。這是默認(rèn)值。
forwards：目標(biāo)將保留由執(zhí)行期間遇到的最后一個(gè)關(guān)鍵幀計(jì)算值。最后一個(gè)關(guān)鍵幀取決于animation-direction和animation-iteration-count的值：

animation-direction	animation-iteration-count	last keyframe encountered
normal	even or odd	100% or to
reverse	even or odd	0% or from
alternate	even	0% or from
alternate	odd	100% or to
alternate-reverse	even	100% or to
alternate-reverse	odd	0% or from

backwards：動(dòng)畫(huà)將在應(yīng)用于目標(biāo)時(shí)立即應(yīng)用第一個(gè)關(guān)鍵幀中定義的值，并在animation-delay期間保留此值。第一個(gè)關(guān)鍵幀取決于animation-direction

animation-direction	first relevant keyframe
normal or alternate	0% or from
reverse or alternate-reverse	100% or to

both：動(dòng)畫(huà)將遵循forwards和backwards的規(guī)則，從而在兩個(gè)方向上擴(kuò)展動(dòng)畫(huà)屬性。

?
?

屬性 `animation-play-state`

實(shí)驗(yàn)中的功能

定義一個(gè)動(dòng)畫(huà)是否運(yùn)行或者暫停?？梢酝ㄟ^(guò)查詢(xún)它來(lái)確定動(dòng)畫(huà)是否正在運(yùn)行。另外，它的值可以被設(shè)置為暫停和恢復(fù)的動(dòng)畫(huà)的重放。

恢復(fù)一個(gè)已暫停的動(dòng)畫(huà)，將從它開(kāi)始暫停的時(shí)候，而不是從動(dòng)畫(huà)序列的起點(diǎn)開(kāi)始在動(dòng)畫(huà)。

####### 語(yǔ)法：

animation-play-state =
<single-animation-play-state>#

<single-animation-play-state> =
running  |
paused

running：當(dāng)前動(dòng)畫(huà)正在運(yùn)行。
paused：當(dāng)前動(dòng)畫(huà)已被停止。

語(yǔ)法示例：

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;

?
?

屬性 `animation-timeline`

語(yǔ)法：

animation-timeline = 
  <single-animation-timeline>#  

<single-animation-timeline> = 
  auto             |
  none             |
  <timeline-name>  

<timeline-name> = 
  <custom-ident>  |
  <string>

none：動(dòng)畫(huà)與時(shí)間線(xiàn)無(wú)關(guān)。
auto：動(dòng)畫(huà)的時(shí)間線(xiàn)是文檔的默認(rèn)文檔時(shí)間線(xiàn)。
scroll()：實(shí)驗(yàn)性的，“匿名”時(shí)間線(xiàn)由當(dāng)前元素的一些祖先提供。有關(guān)更多信息，請(qǐng)參閱 scroll()。

<timeline-name>：使用scroll-timeline-name屬性（或scroll-timeline速記屬性）聲明的<custom-ident>或字符串。如果兩個(gè)或多個(gè)滾動(dòng)時(shí)間線(xiàn)共享相同的名稱(chēng)，則將使用級(jí)聯(lián)中最后聲明的。如果沒(méi)有找到匹配的滾動(dòng)時(shí)間線(xiàn)，則動(dòng)畫(huà)與時(shí)間線(xiàn)無(wú)關(guān)。

?
?

@規(guī)則 `#keyframes`

通過(guò)在動(dòng)畫(huà)序列中定義關(guān)鍵幀（或 waypoints）的樣式來(lái)控制 CSS 動(dòng)畫(huà)序列中的中間步驟。和轉(zhuǎn)換 transition相比，關(guān)鍵幀 keyframes 可以控制動(dòng)畫(huà)序列的中間步驟。

詳情見(jiàn)CSS - At-rules - @keyframes

?
?

應(yīng)用

示例1：

對(duì)比預(yù)定義動(dòng)畫(huà)效果，并保留動(dòng)畫(huà)效果，延遲1s后執(zhí)行。

CSS
@keyframes animation-1 {
    from {
        margin-left: 0px;
    }
    to {
        margin-left: 460px;
    }
}
        
.dbox{
    width: 500px;
    border: 2px solid black;
    padding:0px;
}
.d{
    width: 40px;
    height: 40px;
    background-color: red;
    margin: 10px 0px;
    
    animation-name: "animation-1";
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
.d1{
    animation-timing-function: linear;
}
.d2{
    animation-timing-function: ease;
}
.d3{
    animation-timing-function: ease-in;
}
.d4{
    animation-timing-function: ease-out;
}
.d5{
    animation-timing-function: ease-in-out;
}

效果：

示例2：

做一些比較有意思的，類(lèi)似于彈性的效果。

使用cubic-bezier()函數(shù)

@keyframes animation-1 {
    from {
        margin-left: 0px;
    }
    50%{
        margin-left: 200px;
    }
    to {
        margin-left: 400px;
    }
}
.d{
    width: 40px;
    height: 40px;
    background-color: red;
    margin: 10px 0px;
    
    animation-name: "animation-1";
    animation-duration: 4s;
    /* animation-delay: 1s; */
    animation-fill-mode: forwards;
    
}
.d1{
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* steps(4,start); */
}
.d2{
    animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);/* steps(4,jump-start); */
}
.d3{
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);/* steps(4,end); */
}

效果：

示例3:

使用steps()函數(shù)

@keyframes animation-1 {
    from {
        margin-left: 0px;
    }
    to {
        margin-left: 260px;
    }
}
        
.dbox{
    width: 300px;
    border: 2px solid black;
    padding:0px;
}
.d{
    width: 40px;
    height: 40px;
    background-color: red;
    margin: 10px 0px;
    
    animation-name: "animation-1";
    animation-duration: 4s;
    /* animation-delay: 1s; */
    animation-fill-mode: forwards;
    
}
.d1{
    animation-timing-function: steps(3,start);
}
.d2{
    animation-timing-function: steps(3,jump-start);
}
.d3{
    animation-timing-function: steps(3,end);
}
.d4{
    animation-timing-function: steps(3,jump-end);
}
.d5{
    animation-timing-function: steps(3,jump-both);
}
.d6{
    animation-timing-function: steps(3,jump-none);
}

效果：

?
?

事件與動(dòng)畫(huà)

示例：

CSS:
@keyframes slidein1 {
    from {
        margin-left:50%;
    }
    to {
        margin-left:0%;
    }
}
@keyframes slidein2 {
    from {
        margin-left:50%;
    }
    to {
        margin-left:0%;
    }
}

.slidein1 {
    animation: slidein1 1s alternate 3;
}
.slidein2 {
    animation: slidein2 1s alternate 3;
}

HTML:
<h1 id="watchme">Watch me move</h1>
<p>This example shows how to use CSS animations to make <code>h1</code> elements
move across the page.</p>
<p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
<ul id="output">
</ul>

JS:
<script>
    var e = document.getElementById("watchme");
    e.addEventListener("animationstart", listener, false);
    e.addEventListener("animationend", listener, false);
    e.addEventListener("animationiteration", listener, false);
    
    function startAnimation(){
        if(e.className === "slidein1"){
            e.className = "slidein2";
        }else{
            e.className = "slidein1";
        }
    }
    
    function pauseAnimation(){
        e.style.animationPlayState = "paused";
    }
    
    function continueAnimation(){
        e.style.animationPlayState = "running";
    }
    function listener(e) {
      var l = document.createElement("li");
      switch(e.type) {
        case "animationstart":
          l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
          break;
        case "animationend":
          l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
          e
          break;
        case "animationiteration":
          l.innerHTML = "New loop started at time " + e.elapsedTime;
          break;
      }
      document.getElementById("output").appendChild(l);
    }
    
</script>

效果：

代碼解析：

讓動(dòng)畫(huà)開(kāi)始，直接設(shè)置類(lèi)名即可。

讓動(dòng)畫(huà)重復(fù)，則必須同構(gòu)更改類(lèi)名，才可以實(shí)現(xiàn)，網(wǎng)上也有通過(guò)延遲方法setTimeout()實(shí)現(xiàn)方法，可以試試。

?
?

事件 `AnimationEvent`

實(shí)驗(yàn)中的功能，AnimationEvent 接口表示提供與動(dòng)畫(huà)相關(guān)的信息的事件。

屬性繼承其父級(jí)Event：

詳情參考 AnimationEvent

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS - 動(dòng)畫(huà)

介紹

動(dòng)畫(huà)包括兩個(gè)部分：

CSS 動(dòng)畫(huà)有三個(gè)主要優(yōu)點(diǎn)：

配置動(dòng)畫(huà)

屬性 animation

animation 語(yǔ)法 :

屬性 animation-name

語(yǔ)法：

語(yǔ)法示例：

屬性 animation-duration

語(yǔ)法：

語(yǔ)法示例：

屬性 animation-timing-function

語(yǔ)法：

取值

屬性 animation-delay

語(yǔ)法：

語(yǔ)法示例：

屬性 animation-iteration-count

語(yǔ)法：

語(yǔ)法示例：

屬性 animation-direction

語(yǔ)法：

語(yǔ)法示例：

屬性 animation-fill-mode

語(yǔ)法：

屬性 animation-play-state

語(yǔ)法示例：

屬性 animation-timeline

語(yǔ)法：

@規(guī)則 #keyframes

應(yīng)用

示例1：

示例2：

事件與動(dòng)畫(huà)

事件 AnimationEvent

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

屬性 `animation`

`animation` 語(yǔ)法 :

屬性 `animation-name`

屬性 `animation-duration`

屬性 `animation-timing-function`

屬性 `animation-delay`

屬性 `animation-iteration-count`

屬性 `animation-direction`

屬性 `animation-fill-mode`

屬性 `animation-play-state`

屬性 `animation-timeline`

@規(guī)則 `#keyframes`

事件 `AnimationEvent`