轉(zhuǎn)換（transform）

2D轉(zhuǎn)換

• translate()：

  translate.png

• rotate()：

  rotate.png

• scale()：

  scale.png

• skew():

  skew.png
  skew.png

• matrix():
  matrix( a, b, c, d, e, f );
  a 水平縮放
  b 水平傾斜
  c 垂直傾斜
  d 垂直縮放
  e 水平移動
  f 垂直移動
  

  matrix.png

• transform-origin (): 允許您更改轉(zhuǎn)化元素位置
  

  image.png

3D轉(zhuǎn)換

image.png

• transform-origin(): 允許你改變被轉(zhuǎn)換元素的位置。
  

  image.png

• transform-style(): 規(guī)定被嵌套元素如何在 3D 空間中顯示。
  

  image.png

• perspective(): 規(guī)定 3D 元素的透視效果。
  

  image.png

• perspective-origin(): 規(guī)定 3D 元素的底部位置。
  

  image.png

• backface-visibility(): 定義元素在不面對屏幕時是否可見。
  

  image.png

過渡

元素從一種樣式逐漸改變?yōu)榱硪环N的效果

過渡屬性

過渡屬性.png

• transition: property duration timing-function delay;
• transition-property: none|all| property;屬性指定CSS屬性的nametransition效果
• **transition-duration : time;屬性規(guī)定完成過渡效果需要花費的時間（以秒或毫秒計）。
• transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);屬性指定切換效果的速度。
  
  transition-timing-function值.png
• **ttransition-delay : time;屬性指定何時將開始切換效果。
  transition-delay值是指以秒為單位（S）或毫秒（ms）。

多項改變

多項改變.png

與轉(zhuǎn)換效果一起使用

與轉(zhuǎn)換效果一起使用例子.png

動畫

@keyframes 規(guī)則

要創(chuàng)建 CSS3 動畫，你需要了解 @keyframes 規(guī)則。
@keyframes 規(guī)則是創(chuàng)建動畫。
@keyframes 規(guī)則內(nèi)指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式。
當在 @keyframes 創(chuàng)建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

• 規(guī)定動畫的名稱

• 規(guī)定動畫的時長

  
  
  規(guī)定動畫的名稱、時長.png

請用百分比來規(guī)定變化發(fā)生的時間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。

百分比.png

from" - "to.png

動畫屬性

• @keyframes:規(guī)定動畫。

  
  
  keyframes.png

• animation:所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。

  
  
  animation.png
• animation-name:規(guī)定 @keyframes 動畫的名稱。
• animation-duration:定義動畫完成一個周期需要多少秒或毫秒。默認是 0。

• animation-timing-function:指定動畫將如何完成一個周期。

  
  
  animation-timing-function.png

• animation-fill-mode: 規(guī)定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
  默認情況下，CSS 動畫在第一個關(guān)鍵幀播放完之前不會影響元素，在最后一個關(guān)鍵幀完成后停止影響元素。animation-fill-mode 屬性可重寫該行為。

  
  
  animation-fill-mode.png

• animation-delay:定義動畫什么時候開始。單位可以是秒（s）或毫秒（ms）。默認是 0。

  
  
  animation-delay.png

• animation-iteration-count:定義動畫應該播放多少次。

  
  
  animation-iteration-count.png

• animation-direction 屬性定義是否循環(huán)交替反向播放動畫。

  
  
  animation-direction.png

• animation--play-state屬性指定動畫是否正在運行或已暫停。

  
  
  animation--play-state.png

動畫常見坑

1. @keyframes 不能實現(xiàn)突變的狀態(tài)變化
   @keyframes 的原理是把樣式的從一個狀態(tài)，慢慢轉(zhuǎn)變?yōu)榱硪粋€狀態(tài)。例如：

* div 在2s內(nèi)下移200px
*/
div {
    position:absolute;
    animation: move 2s;
}
@keyframes move {
    from { top:0; }
    to   { top:200px;}
}

上述div的移動，不是一步完成的，而是中間有很多個狀態(tài)，從top:1px , 到top :2px , top: 3px ……最終到 top:200px; 這樣一系列狀態(tài)組成而構(gòu)成的動畫。
所以，如果不存在漸變的狀態(tài)，是無法用@keyframes構(gòu)成動畫的，例如：

div {
    animation: apear 2s;
}
@keyframes appear {
    from { display:none; }
    to   { display:block;}
}

我們知道，display:none;是將div消失并且不占空間，display:block;則是將div展現(xiàn)存在并占據(jù)空間。但上述代碼是無法使div擁有 2秒內(nèi)從消失到展現(xiàn) 的漸變動畫的，因為display:none;和display:block;是突變的，是從display:none;一下子到display:block;狀態(tài)的。所以@keyframes無法實現(xiàn)。
同理其他種類的突變屬性也無法擁有@keyframes的動畫效果，@keyframes 只存在于漸變屬性當中，例如各種width, height, opacity等屬性值為數(shù)值的屬性。

2. @keyframes會增添/覆蓋屬性

/*
* div 在2s內(nèi)下移200px
*/
div {
    position:absolute;
    top:0px;
    animation: move 2s;
}
@keyframes move {
    from { top:20px; }
    to   { top:200px;}
}

覆蓋屬性：如上述情況，div初始狀態(tài)是top:0; @keyframes首先用top:20px覆蓋原屬性（top:0;）,然后再啟動@keyframes功能。 所以我們看到的效果是：div突然瞬間下降20px，然后在2秒內(nèi)下降至指定位置（top:200px;）。

/*
* div 在2s內(nèi)下移200px
*/
div {
    position:absolute;
    top:0px;
    animation: move 2s;
}
@keyframes move {
    from { top:0px; }
    to   { bottom:0px;}
}

添加屬性：上述代碼初始狀態(tài)是div在頂部，最后狀態(tài)是div 在底部，但像上面這樣寫 并不會出現(xiàn)div 從頂部慢慢下滑至底部的動畫，而是div突然就出現(xiàn)在了底部。這是因為初始狀態(tài)為div{ top:0px ;}，但最終狀態(tài)卻不會是 div { bottom:0px; } , 而是 div { top:0px; bottom: 0px; } ，這樣就會出現(xiàn)明顯的錯誤，達不到我們預想的效果。

小結(jié): @keyframes 中的屬性，如果div本身存在該屬性，就被@keyframes 中的屬性給覆蓋掉。 如果div本身不存在該屬性，則為div增添該屬性。

3. 動畫性能優(yōu)化
   當你在使用@keyframes 動畫時，如果做的動畫比較復雜的話，就會發(fā)現(xiàn)一個問題，那就是不流暢，掉幀，可能在PC端還不是很明顯，但在移動端你就會發(fā)現(xiàn)嚴重地掉幀。這是因為，如果@keyframes 改變的屬性是與layout相關(guān)的話，就會觸發(fā)重新布局，導致渲染和繪制的時間會更加地長。 所以，我們應該盡可能地使用不會觸發(fā)重新布局的屬性完成我們的動畫。
   • 觸發(fā)重新布局的屬性有： width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。應該盡量規(guī)避使用。
   • 不會出發(fā)重新布局的屬性有：transform(其中的translate, rotate, scale), color, background等。應該盡量用這些去取代。
4. 已知bug
   • iOS 6.1及以下不支持偽元素動畫。iOS 7和更高的版本的偽元素動畫會些問題。
   • Firefox 不支持@keyframes 在內(nèi)聯(lián)元素的使用。
   • 在Chorme中，如果使用了steps(x , start) ，animation-fill-mode backwards將會出錯。如例子
   • 在IE10和IE11中，@keyframes不能在媒體查詢@media內(nèi)使用。

————————————————
參考鏈接：

• https://blog.csdn.net/Cherishor/article/details/51100303
• https://www.runoob.com/css3/css3-animations.html