css3動畫：transition和animation

第一部分：Transition

transition的各項屬性：

transition的完整寫法以下。

這實際上是一個簡寫形式，能夠單獨定義成各個屬性。

img{ transition-property: height; transition-duration: 1s; transition-delay: 1s; transition-timing-function: ease; }

transition的做用在於，指定狀態變化所須要的時間。

img{
　　transition:1s;
}
能夠指定transition適用的屬性，好比只適用於height。
img{
　
　　transition:1s height;//img{ height:15px; width:15px; } img:hover{ height: 450px; width: 450px; }

只有height的變化須要1秒實現，其餘變化（主要是width）依然瞬間實現

}

transition-delay屬性  表示延時加載

在同一行transition語句中，能夠分別指定多個屬性

img{

　　transition: 1s height, 2s 1s width;//width在1秒以後，再開始變化，也就是延遲（delay）1秒,2s內完成

}

注意：delay的真正意義在於，它指定了動畫發生的順序，使得多個不一樣的transition能夠連在一塊兒，造成複雜效果。

transition-timing-function 屬性

transition的狀態變化速度（又稱timing function），默認不是勻速的，而是逐漸放慢，這叫作ease。

其屬性值：img{ transition: 1s ease; }

（1）linear：勻速

（2）ease-in：加速

（3）ease-out：減速

（4）cubic-bezier函數：自定義速度模式
最後那個cubic-bezier，可使用工具網站來定製。用法：

img{ transition: 1s height cubic-bezier(.83,.97,.05,1.44); } 

 

 transition的使用注意：

（1）目前，各大瀏覽器（包括IE 10）都已經支持無前綴的transition，因此transition已經能夠很安全地不加瀏覽器前綴。

（2）不是全部的CSS屬性都支持transition，完整的列表查看這裏，以及具體的效果。

（3）transition須要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。好比，height從0px變化到100px，transition能夠算出中間狀態。可是，transition無法算出0px到auto的中間狀態，也就是說，若是開始或結束的設置是height: auto，那麼就不會產生動畫效果。相似的狀況還有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

transition的侷限

transition的優勢在於簡單易用，可是它有幾個很大的侷限。

（1）transition須要事件觸發，因此無法在網頁加載時自動發生。

（2）transition是一次性的，不能重複發生，除非一再觸發。

（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

CSS Animation就是爲了解決這些問題而提出的。

第二部分：Animation

1.首先，CSS Animation須要指定動畫一個週期持續的時間，以及動畫效果的名稱。

上面代碼表示，當鼠標懸停在div元素上時，會產生名爲rainbow的動畫效果，持續時間爲1秒。爲此，咱們還須要用keyframes關鍵字，定義rainbow效果。div:hover { animation: 1s rainbow; }

默認狀況下，動畫只播放一次。加入infinite關鍵字，可讓動畫無限次播放。@keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }

div:hover { animation: 1s rainbow infinite;//動畫無限次播放 }
　　也能夠指定動畫具體播放的次數，好比3次
　　　　animation: 1s rainbow 3;
心臟跳動的例子，可供參考^^

animation-fill-mode屬性

動畫結束之後，會當即從結束狀態跳回到起始狀態。若是想讓動畫保持在結束狀態，須要使用animation-fill-mode屬性。

其餘屬性值：　　

1）none：默認值，回到動畫沒開始時的狀態。

（2）backwards：讓動畫回到第一幀的狀態。

（3）both: 根據animation-direction（見後）輪流應用forwards和backwards規則。

div:hover{

animation: 2s rowsd forwards;

}

animation-direction屬性------表示動畫循環播放時，每次都是從結束狀態跳回到起始狀態，再開始播放。animation-direction屬性，能夠改變這種行爲。

默認狀況是，animation-direction等於normal。

屬性值：normal/reverse

下面看一個例子，來講明如何使用animation-direction。假定有一個動畫是這樣定義的。

@keyframes rainbow { 0% { background-color: yellow; } 100% { background: blue; } }

div:hover { animation: 1s rainbow 3 normal;//normal正常執行，先yellow，再blue }

對於屬性值爲 reverse

animation: 2s rowsd 3 reverse;
/*reverse倒敘執行顏色，先執行blue，再執行yellow*/

animation的各項屬性   

同transition同樣，animation也是一個簡寫形式。

能夠分解成各個單獨的屬性。div:hover { animation: 1s 1s rainbow linear 3 forwards normal; }

div:hover { animation-name: rainbow; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3; }

keyframes的寫法

keyframes關鍵字用來定義動畫的各個狀態，它的寫法至關自由。

@keyframes rainbow { 0% { background: #c00 } 50% { background: orange } 100% { background: yellowgreen } } 

 

0%能夠用from表明，100%能夠用to表明，所以上面的代碼等同於下面的形式。
例如：

@keyframes rainbow { from { background: #c00 } 50% { background: orange } to { background: yellowgreen } }
注意：另一點須要注意的是，瀏覽器從一個狀態向另外一個狀態過渡，是平滑過渡。steps函數能夠實現分步過渡。

div:hover { animation: 1s rainbow infinite steps(10); } 

 神奇的例子，能夠看到steps函數的用處。


animation-play-state屬性

有時，動畫播放過程當中，會忽然中止。這時，默認行爲是跳回到動畫的開始狀態。

若是想讓動畫保持忽然終止時的狀態，就要使用animation-play-state屬性。

div { animation: spin 1s linear infinite; animation-play-state: paused; } div:hover { animation-play-state: running; }

@keyframes 動畫名    瀏覽器前綴

目前，IE 10和Firefox（>= 16）支持沒有前綴的animation，而chrome不支持，因此必須使用webkit前綴。

項目中代碼寫法必須爲 以下所示：

div:hover { -webkit-animation: 1s rainbow; animation: 1s rainbow; } @-webkit-keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } } @keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }

 詳細學習地址;http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

轉載效果：https://blog.csdn.net/erdouzhang/article/details/71402747

 旋轉效果demo  代碼：

h3{ width: 100px; height: 100px; border-radius: 50%; background-color: pink; text-align: center; line-height: 100px; margin:100px 0; } h3 span{ display: inline-block; width: 30px; height: 30px; border-radius: 15px; background-color: #fff; } h3:hover span{ animation: lxs 2s linear infinite; -webkit-animation:lxs 2s linear infinite; } @keyframes lxs{ from{transform: rotate(0deg);} to{transform: rotate(360deg);} } @-webkit-keyframes lxs{ from{-webkit-transform: rotate(0deg);} to{-webkit-transform: rotate(360deg);} }