802      阿裏雲  技術社區[雲棲]

一起領略css3動畫的強大

CSS3的確出了不少高大上的功能,3D效果/動畫/多列等等;今天寫篇文章記錄怎麼一下怎麼用CSS3寫一個動畫;不過還是要提醒大家:IE9及以下版本不支持CSS3動畫(需要可以考慮用js,不過估計效果不好);chrome和safafi建議加上前綴-webkit-以向前兼容老版本

CSS3動畫相關的幾個屬性是:transition/transform/animation,我分別理解為過渡/變換/動畫;雖意義相近,但具體角色不一

transition指過渡,就是從a點都b點,就像過江坐渡輪,是有時間的/連續的,一般針對常規CSS屬性;transform指變換,就那幾個固定的屬性,例如:旋轉/縮放/偏移等,可獨立於transition使用;但效果就是很幹澀機械的旋轉移動,要是配合transition屬性就會很平滑;animation最先安家於Safari瀏覽器,與transition和transform有老死不相往來之感,但是要說單挑的話,個人認為animation要比transition厲害些

transition

CSS3中新增加了一個新的模塊transition,它可以通過一些簡單的CSS事件來觸發元素的外觀變化,讓效果顯得更加細膩;W3C標準中對css3的transition這是樣描述的:"css的transition允許css的屬性值在一定的時間區間內平滑地過渡,這種效果可以在鼠標單擊/獲得焦點/被點擊或對元素任何改變中觸發,並圓滑地以動畫效果改變CSS的屬性值";下麵我們從其語法和屬性值開始一步一步來學習transition的具體使用

在CSS中創建簡單的過渡效果可以從以下幾個步驟來實現:

1.在默認樣式中聲明元素的初始狀態樣式

2.聲明過渡元素最終狀態樣式,比如懸浮狀態

3.在默認樣式中通過添加過渡函數添加一些不同的樣式

語法:

transition:[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>[,[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>]]

transition主要包含四個屬性值:

transition-property:指定過渡或動態模擬的CSS屬性;transition-duration:指定完成過渡所需的時間;transition-timing-function:指定過渡函數;transition-delay:指定過渡開始出現的延遲時間

transition-property

transition-property用來指定過渡動畫的CSS屬性名稱,而這個過渡屬性隻有具備一個中點值的屬性(需要產生動畫的屬性)才能具備過渡效果

語法:

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]

transition-property是用來指定當元素其中一個屬性改變時執行transition效果,其主要有以下幾個值:none(沒有屬性改變),all(所有屬性改變)這個也是其默認值,indent(元素屬性名);當其值為none時transition馬上停止執行,當指定為all時則元素產生任何屬性值變化時都將執行transition效果,ident是可以指定元素的某一個屬性值;其對應的屬性如下:

| background-color | background-position | border-bottom/left/top/right-color | border-bottom/left/top/right-width | border-spacing | bottom/left/top/right | clip | color | font-size | font-weight | height | letter-spacing | line-height | margin-bottom/left/top/right | max/min-height/width | opacity | outline-color | outline-width | padding-bottom/left/top/right | text-indent | text-shadow | vertical-align | visibility | width | word-spacing | z-index |

用一個簡單的例子來說明all:

假設初始狀態設置了樣式width/height/background,當你在終始狀態都改變了這三個屬性,那麼all代表的就是width/height/background,如果你的終始狀態隻改變了width/height,那麼all代表的就是width/height

transition-duration

語法:

transition-duration ： <time> [, <time>]

transition-duration用來指定元素轉換過程的持續時間,取值:為數值,單位為s(秒)或ms(毫秒),可以作用於所有元素,包括:before和:after偽元素;其默認值是0,也就是變換是即時的

transition-timing-function

transition-timing-function屬性指的是過渡的"緩動函數",主要用來指定瀏覽器的過渡速度,以及過渡期間的操作進展情況,其中要包括以下幾種函數:

語法:

 transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)[,ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)]

transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率,有6個可能值:

舉例:

<style>
.test{
    height: 100px; width: 100px; background-color: pink; transition-duration: 3s;
    / 以下三值為默認值 /
    transition-property: all; transition-timing-function: ease; transition-delay: 0s;
}    
.test:hover{
    width: 500px;
}
</style>
<div></div>

transition-delay

語法:

transition-delay ： <time> [, <time>]

transition-delay是用來指定一個動畫開始執行的時間,也就是說當改變元素屬性值後多長時間開始執行transition效果,其取值:為數值,單位為s(秒)ms(毫秒),其使用和transition-duration極其相似,也可以作用於所有元素,包括:before和:after偽元素;默認大小是0,也就是變換立即執行,沒有延遲

有時我們不隻改變一個css效果的屬性,而是想改變兩個或者多個css屬性的transition效果，那麼我們隻要把幾個transition的聲明串在一起,用逗號（','）隔開,然後各自可以有各自不同的延續時間和其時間的速率變換方式;但需要值得注意的一點:transition-delay與transition-duration的值都是時間,所以要區分它們在連寫中的位置,一般瀏覽器會根據先後順序決定,第一個可以解析為時間的怭值為transition-duration第二個為transition-delay

 a {
  -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
  -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
  -o-transition: background 0.5s ease-in,color 0.3s ease-out;
  transition: background 0.5s ease-in,color 0.3s ease-out;
}

如果想給元素執行所有transition效果的屬性,還可以利用all屬性值來操作,此時他們共享同樣的延續時間以及速率變換方式

 a {
  -moz-transition: all 0.5s ease-in; 
  -webkit-transition: all 0.5s ease-in; 
  -o-transition: all 0.5s ease-in; 
  transition: all 0.5s ease-in;
}

綜合上述我們可以給transition一個速記法:transition:<property><duration><animation type><delay>,相對應的一個示例代碼

p {
  -webkit-transition: all .5s ease-in-out 1s; //Webkit內核
  -o-transition: all .5s ease-in-out 1s; //Opera
  -moz-transition: all .5s ease-in-out 1s; //Mozilla內核
  transition: all .5s ease-in-out 1s; //W3C 標準
}

瀏覽器的兼容性

為了避免兼容性,在應用transition時我們有必要加上各自的前綴,最好再放上我們W3C的標準寫法,這樣隻要瀏覽器支持我們的transition屬性,那麼這種效果就會自動加上去

transform

Transform字麵上就是變形/改變的意思,在CSS3中transform屬性實現了一些可用SVG實現的功能,它可用於內聯(inline)元素和塊級(block)元素;transform主要包括以下幾種:旋轉rotate/扭曲skew/縮放scale/移動translate/矩陣變形matrix;下麵我們一起來看看CSS3中transform的各個動畫具體如何實現

transform ： none | <transform-function> [ <transform-function> ]
也就是：
transform: rotate | scale | skew | translate |matrix;

none表示不進行變換;表示一個或多個變換函數,以空格分開,即我們同時對一個元素進行transform的多種屬性操作,例如rotate/scale/translate三種,但以往我們疊加效果都是用逗號(,)隔開,但transform中使用多個屬性時卻需要有空格隔開

旋轉rotate

rotate():通過指定的角度參數對原元素指定一個2D rotation(2D旋轉),需先有transform-origin屬性的定義;transform-origin定義的是旋轉的基點,其中angle是指旋轉角度,如果設置的值為正數表示順時針旋轉,如果設置的值為負數則表示逆時針旋轉;如:transform:rotate(30deg)

<style>
#current
{
    width:200px;
    height:100px;
    color:white;
    background-color: #3EDFF4;
    text-align:center;
    transform-origin:20px 20px;  / 改變基點 /
    -webkit-transform-origin:20px 20px;
    -moz-transform-origin:20px 20px;
    transform:rotate(30deg);
    -webkit-transform:rotate(30deg);  /兼容-webkit-引擎瀏覽器/
    -moz-transform:rotate(30deg);     /兼容-moz-引擎瀏覽器/
}
</style>
<div ></div>

移動translate

移動translate我們分為三種情況:translate(x,y)水平方向和垂直方向同時移動(也就是X軸和Y軸同時移動);translateX(x)僅水平方向移動(X軸移動);translateY(Y)僅垂直方向移動(Y軸移動)

translate([, ])

通過矢量[tx,ty]指定一個2D translation,tx是第一個過渡值參數,ty是第二個過渡值參數選項;如果未被提供,則ty以0作為其值,也就是translate(x,y):表示對象按照設定的x,y參數值進行平移,當值為負數時反方向移動物體,其基點默認為元素中心點,也可以根據transform-origin進行改變基點;如transform:translate(100px,20px)

<style>
#current
{
    width:200px;
    height:100px;
    color:white;
    background-color: #3EDFF4;
    text-align:center;
    transform:translate(20px,20px);
    -webkit-transform:translate(20px,20px);  /兼容-webkit-引擎瀏覽器/
    -moz-transform:translate(20px,20px);     /兼容-moz-引擎瀏覽器/
}
</style>
<div ></div>

translateX()

通過給定一個X方向上的數值指定一個translation,隻向x軸進行移動元素,同樣其基點是元素中心點,也可以根據transform-origin改變基點位置;如:transform:translateX(100px)

translateY()

通過給定Y方向的數目指定一個translation,隻向Y軸進行移動,基點在元素心點,可以通過transform-origin改變基點位置;如:transform:translateY(20px)

縮放scale

縮放scale和移動translate極其相似,他也具有三種情況:scale(x,y):使元素水平方向和垂直方向同時縮放(也就是X軸和Y軸同時縮放),scaleX(x):元素僅水平方向縮放(X軸縮放),scaleY(y):元素僅垂直方向縮放(Y軸縮放),但它們具有相同的縮放中心點和基數,其中心點就是元素的中心位置,縮放基數為1,如果其值大於1元素就放大,反之其值小於1元素縮小

scale([, ])

提供執行[sx,sy]縮放矢量的兩個參數指定一個2D scale(2D縮放);如果第二個參數未提供則取與第一個參數一樣的值,scale(X,Y)是用於對元素進行縮放,可以通過transform-origin對元素的基點進行設置,同樣基點在元素中心位置;其中X表示水平方向縮放的倍數,Y表示垂直方向的縮放倍數,而Y是一個可選參數,如果沒有設置Y值則表示X/Y兩個方向的縮放倍數是一樣的,並以X為準;如:transform:scale(2,1.5)

<style>
#current
{
    width:200px;
    height:100px;
    color:white;
    background-color: #3EDFF4;
    text-align:center;
    transform:translate(20px,20px);
    -webkit-transform:translate(20px,20px);  /兼容-webkit-引擎瀏覽器/
    -moz-transform:translate(20px,20px);     /兼容-moz-引擎瀏覽器/
}
</style>
<div ></div>

scaleX()

使用[sx,1]縮放矢量執行縮放操作,sx為所需參數;scaleX表示元素隻在X軸(水平方向)縮放元素,他的默認值是(1,1),其基點一樣是在元素的中心位置,我們同樣是通過transform-origin來改變元素的基點;如:transform:scaleX(2)

scaleY()

使用[1,sy] 縮放矢量執行縮放操作,sy為所需參數;scaleY表示元素隻在Y軸(垂直方向)縮放元素,其基點同樣是在元素中心位置,可以通過transform-origin來改變元素的基點;如:transform:scaleY(2)

扭曲skew

扭曲skew和translate/scale一樣同樣具有三種情況:skew(x,y)使元素在水平和垂直方向同時扭曲(X軸和Y軸同時按一定的角度值進行扭曲變形),skewX(x)僅使元素在水平方向扭曲變形(X軸扭曲變形),skewY(y)僅使元素在垂直方向扭曲變形(Y軸扭曲變形)

skew( [, ])

X軸Y軸上的skew transformation(斜切變換);第一個參數對應X軸,第二個參數對應Y軸;如果第二個參數未提供,則值為0,也就是Y軸方向上無斜切;skew是用來對元素進行扭曲變形,第一個參數是水平方向扭曲角度,第二個參數是垂直方向扭曲角度;其中第二個參數是可選參數,如果沒有設置第二個參數,那麼Y軸為0deg;同樣是以元素中心為基點,我們也可以通過transform-origin來改變元素的基點位置;如:transform:skew(30deg,10deg)

<style>
#current
{
    width:200px;
    height:100px;
    color:white;
    background-color: #3EDFF4;
    text-align:center;
    transform:skew(30deg,10deg);
    -webkit-transform:skew(30deg,10deg);  /兼容-webkit-引擎瀏覽器/
    -moz-transform:skew(30deg,10deg);    /兼容-moz-引擎瀏覽器/
}
</style>
<div ></div>

skewX()

按給定的角度沿X軸指定一個skew transformation(斜切變換);skewX是使元素以其中心為基點,並在水平方向(X軸)進行扭曲變形,同樣可以通過transform-origin來改變元素的基點;如:transform:skewX(30deg)

矩陣matrix

matrix(,,,,,):以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換,相當於直接應用一個[a b c d e f]變換矩陣;就是基於水平方向(X軸)和垂直方向(Y軸)重新定位元素;此屬性值使用涉及到數學中的矩陣,在這裏隻是簡單的說一下CSS3中的transform有這麼一個屬性值,如果有感興趣的朋友可以去了解更深層次的martix使用方法

改變元素基點transform-origin

前麵我們多次提到transform-origin這個東東,他的主要作用就是讓我們在進行transform動作之前可以改變元素的基點位置,因為我們元素默認基點就是其中心位置;換句話說我們沒有使用transform-origin改變元素基點位置的情況下,transform進行的rotate/translate/scale/skew/matrix等操作都是以元素自己中心位置進行變化的,但有時候我們需要在不同的位置對元素進行這些操作,那麼我們就可以使用transform-origin使元素基點不在是中心位置,以達到你需要的基點位置;下麵我們主要來看看其使用規則

transform-origin(X,Y):用來設置元素的運動的基點(參照點),默認點是元素的中心點,其中X和Y的值可以是百分值/em/px,其中X也可以是字符參數值left/center/right,Y和X一樣除了百分值外還可以設置字符值top/center/bottom,這個看上去有點像我們background-position設置一樣,下麵我列出他們相對應的寫法:

其中left/center/right是水平方向取值,對應的百分值為left=0%/center=50%/right=100%,而top/center/bottom是垂直方向的取值,其中top=0%/center=50%/bottom=100%;如果隻取一個值,表示垂直方向值不變

更多改變中心基點的辦法,大家可以在本地多體會,這裏還要提醒的是:transform-origin並不是transform中的屬性值,他具有自己的語法,而且transform-origin跟其他的css3屬性一樣需要在不同的瀏覽內核中加上相應的前綴,下麵列出各種瀏覽器內核下的語法規則:

  -moz-transform-origin: x y; //Mozilla內核瀏覽器：firefox3.5+  
  -webkit-transform-origin: x y; //Webkit內核瀏覽器：Safari and Chrome  
  -o-transform-origin: x y ; //Opera  
  -ms-transform-origin: x y; //IE9  
  transform-origin: x y ; //W3C標準

transform在不同瀏覽器內核下的書寫規則

  -moz-transform: rotate | scale | skew | translate ; //Mozilla內核瀏覽器：firefox3.5+ 
  -webkit-transform: rotate | scale | skew | translate ; //Webkit內核瀏覽器：Safari and Chrome 
  -o-transform: rotate | scale | skew | translate ; //Opera 
  -ms-transform: rotate | scale | skew | translate ; //IE9 
  transform: rotate | scale | skew | translate ; //W3C標準

同樣的transform在IE9下版本是無法兼容的

舉個同時使用多個屬性的例子

<style type="text/css">      
    #current
    {
        width:200px;
        height:100px;
        color:white;
        background-color: #3EDFF4;
        text-align:center;

        transition:1s;
    }
    #current:hover{
         transform:scale(0.5,1) rotate(30deg);
    }
</style>
<div ></div>

Animation

我們一起學習完了Transform和Transition,讓我們對元素實現了一些基本的動畫效果,這些我想足以讓大家激動了一陣子,現在我們趁著這個熱勁繼續第三個動畫屬性Animation的學習;單從Animation字麵上的意思,我們就知道是"動畫",但CSS3中的Animation與HTML5中的Canvas繪製動畫又不同,Animation隻應用在頁麵上已存在的DOM元素上,而且他跟Flash/JavaScript/jQuery製作出來的動畫效果又不一樣,因為我們使用CSS3的Animation製作動畫可以省去複雜的js/jquery代碼

在開始介紹Animation之前我們有必要先來了解一個特殊的東西,那就是"Keyframes",我們把他叫做"關鍵幀";前麵我們在使用transition製作一個簡單的transition效果時,包括了初始屬性和最終屬性,一個開始執行動作時間和一個延續動作時間以及動作的變換速率,其實這些值都是一個中間值;如果我們要控製的更細一些,比如說我要第一個時間段執行什麼動作,第二個時間段執行什麼動作,用Transition就很難實現了,此時我們也需要這樣的一個"關鍵幀"來控製;那麼CSS3的Animation就是由"Keyframes"這個屬性來實現這樣的效果

Keyframes具有自己的語法規則,他的命名是由"@keyframes"開頭,後麵緊接著是這個"動畫名稱"加上一對花括號"{}",括號中就是一些不同時間段樣式規則,有點像我們css的樣式寫法;一個"@keyframes"中的樣式規則是由多個百分比構成的,如"0%"到"100%"之間,我們可以在這個規則中創建多個百分比,分別在每個百分比中給需要有動畫效果的元素加上不同的屬性,從而讓元素達到一種不斷變化的效果,比如移動/改變元素顏色/位置/大小/形狀等;不過有一點需要注意的是,我們可以使用"fromt"/"to"來代表一個動畫是從哪開始/到哪結束,也就是說"from"就相當於"0%"而"to"相當於"100%";值得一說的是,其中"0%"不能像別的屬性取值一樣把百分比符號省略,我們在這裏必須加上百分符號;如果沒有加上的話,我們這個keyframes是無效的,不起任何作用;因為keyframes的單位隻接受百分比值

Keyframes語法

 @keyframes IDENT {
 from {
   Properties:Properties value;
 }
 Percentage {
   Properties:Properties value;
 }
 to {
   Properties:Properties value;
 }
}
或者全部寫成百分比的形式：
@keyframes IDENT {
  0% {
     Properties:Properties value;
  }
  Percentage {
     Properties:Properties value;
  }
  100% {
     Properties:Properties value;
  }
}

其中IDENT是一個動畫名稱,可以隨便取,當然語義化一點更好;Percentage是百分比值,我們可以添加許多個這樣的百分比,Properties為css的屬性名,比如說left/background等,value就是相對應的屬性的屬性值

@keyframes 'wobble' {
   0% {
      margin-left: 100px;
      background: green;
   }
   40% {
      margin-left: 150px;
      background: orange;
   }
   60% {
      margin-left: 75px;
      background: blue;
   }
   100% {
      margin-left: 100px;
      background: red;
   }
}  
@-webkit-keyframes 'wobble' {
   0% {
      margin-left: 100px;
      background: green;
   }
   40% {
      margin-left: 150px;
      background: orange;
   }
   60% {
      margin-left: 75px;
      background: blue;
   }
   100% {
      margin-left: 100px;
      background: red;
   }
}

這裏我們定義了一個叫"wobble"的動畫,從0%開始到100%時結束,從中還經曆了一個40%和60%兩個過程,上麵代碼具體意思是:wobble動畫在0%時元素定位到left為100px的位置背景色為green,然後40%時元素過渡到left為150px的位置並且背景色為orange,60%時元素過渡到left為75px的位置背景色為blue,最後100%結束動畫的位置元素又回到起點left為100px處背景色變成red

Keyframes定義好後,我們需要怎麼去調用剛才定義好的動畫"wobble"?

CSS3的animation類似於transition屬性,他們都是隨著時間改變元素的屬性值;他們主要區別是:transition需要觸發一個事件(hover/click等)才會隨時間改變其css屬性,而animation不需要觸發任何事件的情況也可以顯式的隨著時間變化來改變元素css的屬性值,從而達到一種動畫的效果,這樣我們就可以直接在一個元素中調用animation的動畫屬性;基於這一點,css3的animation就需要明確的動畫屬性值,這也就回到我們上麵所說的,我們需要keyframes來定義不同時間的css屬性值,達到元素在不同時間段變化的效果

.demo1 {
   width: 50px;
   height: 50px;
   margin-left: 100px;
   background: blue;
   -webkit-animation-name:'wobble';/動畫屬性名，也就是我們前麵keyframes定義的動畫名/
   -webkit-animation-duration: 10s;/動畫持續時間/
   -webkit-animation-timing-function: ease-in-out; /動畫頻率，和transition-timing-function是一樣的/
   -webkit-animation-delay: 2s;/動畫延遲時間/
   -webkit-animation-iteration-count: 10;/定義循環資料，infinite為無限次/
   -webkit-animation-direction: alternate;/定義動畫方式/
}

animation-name - 設置動畫名

主要是用來調用@keyframes定義好的動畫;animation-name調用的動畫名需要和"@keyframes"定義的動畫名稱完全一致(區分大小寫),如果不一致將不具有任何動畫效果

animation-name: none / IDENT

IDENT是由@keyframes創建的動畫名,我們可以同時附幾個animation給一個元素,隻需要用逗號隔開;none為默認值,當值為none時將沒有任何動畫效果,這可以用於覆蓋任何動畫

注意：需要在Chrome和Safari上麵的基礎上加上-webkit-前綴,Firefox加上-moz-

animation-duration - 設置動畫播放時間

主要用來設置CSS3動畫播放時間,其使用方法和transition-duration類似,是用來指定元素播放動畫所持續的時間長,也就是完成從0%到100%一次動畫所需時間;單位:S秒

animation-duration: <time>

取值為數值,單位為秒,其默認值為0,這意味著動畫周期為0,也就是沒有動畫效果(如果值為負值會被視為0)

animation-timing-function - 設置動畫播放方式

主要讓元素根據時間的推進來改變屬性值的變換速率，簡單點說就是動畫的播放方式

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) 

它和transition中的transition-timing-function一樣,具有以下幾種變換方式:ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier

animation-delay - 設置動畫開始播放的時間

用來觸發動畫播放的時間點,和transition-delay屬性一樣,用於定義在瀏覽器開始執行動畫之前等待的時間

animation-delay:<time>

製作一個矩形變成圓形的動畫,瀏覽器渲染樣式之後1S之後觸發toradius動畫,整個動畫播放時間持續了10s鍾

<div>Hover Me</div>
<style>
@keyframes toradius{
  from {
    border-radius: 0;
  }
  to {
    border-radius: 100%;
  }
}
div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  background: green;
  margin: 20px auto;
}
div:hover {
  animation-name: toradius;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-delay: .1s;
}
</style>

animation-iteration-count - 定義動畫的播放次數

animation-iteration-count: infinite | <number>

其值通常為整數,但也可以使用帶有小數的數字,其默認值為1,意味著動畫將從開始到結束隻播放一次;如果取值為infinite,動畫將會無限次的播放

注意:Chrome或Safari瀏覽器,需要加入-webkit-前綴

animation-direction - 設置動畫播放方向

animation-direction:normal | alternate

其主要有兩個值:normal/alternate;如果設置為normal(默認值),動畫的每次循環都是向前播放;另一個值是alternate,它的作用是動畫播放在第偶數次向前播放,第奇數次向反方向播放

注意:Chrome或Safari瀏覽器,需要加入-webkit-前綴

animation-play-state - 控製元素動畫的播放狀態

animation-play-state:running | paused

其參數主要有兩個值:running和paused,主要作用就是類似於音樂播放器一樣;通過paused將正在播放的動畫停下來,也可以通過running(默認值)將暫停的動畫重新播放;這裏的重新播放不一定是從元素動畫的開始播放,而是從暫停的那個位置開始播放;另外如果暫停了動畫的播放,元素的樣式將回到最原始設置狀態;例如:頁麵加載時動畫不播放,代碼如下：

animation-play-state:paused;

animation-fill-mode - 設置動畫時間外屬性

animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作,主要具有四個屬性值:none/forwards/backwords/both;其四個屬性值對應效果如下:

默認情況下,動畫不會影響它關鍵幀之外的屬性,使用animation-fill-mode屬性可以修改動畫的默認行為;簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始,或者在動畫結束時停在最後一個關鍵幀上而不回到動畫的第一幀上,或者同時具有這兩個效果

例如:讓動畫停在最後一幀處,代碼如下:

animation-fill-mode:forwards; 

最後更新：2017-11-10 17:04:01

  上一篇：  阿裏雲聆聽，開門接客8個月成效如何？

  下一篇：  11月10日雲棲精選夜讀：零點之戰！2017雙11關鍵技術全公開