CSS3動畫使用技巧與總結

構建css3動畫的屬性很簡單，總的來講只有transform（變形），transition（過渡），和animation（動畫）這三種。
因此這裏，更少的從介紹語法的角度，而是從使用的角度來介紹css3動畫
具體的每個屬性的用法寫法，推薦見CSS3動畫手冊

基礎知識 - 三個屬性

先來回顧下這三個屬性和大體功能

transform（變形）

直接改變大小和位置，顯示改變的結構，沒有過渡和形變時間

transform:rotate(360deg) scale(-1.2,1.2)translate(100px,50px) skew(45deg,45deg)

1. 旋轉rotate
   利用css變形屬性能夠將對應的屬性旋轉相對應的角度，能夠順時針旋轉，逆時針（負值）旋轉，能夠3D旋轉，3D旋轉能夠分別繞X軸，Y軸，Z軸旋轉。

2. 縮放scale
   負值爲先翻轉，再縮放對應的倍數，能夠在X,Y，Z上作縮放

3. 位移translate
   能夠在X，Y軸上作平移，或者同時在x,y,z軸上作平移

4. 斜切skew
   可以讓元素傾斜顯示，本質上是可讓X，Y軸傾斜必定程度

transition（過渡）

會有一個形變的過程，會有過渡和形變時間
舉個複雜的例子

.first{
left:110px;
top:0;
-webkit-transition-property:left,top,background;
-webkit-transition-duration:1s,2s,2s;
-webkit-transition-delay:0,0,2s;
-webkit-transition-timing-function:ease,ease-in,linear;
}
.first:hover{
left:310px;
top:200px;
background:red;
}

這個例子實現的呢就是，不一樣屬性在不一樣起始時間開始發生了不一樣變化時間長短的變化，而且不一樣變化的變化速率不一樣

animation（動畫）

**一樣的也是一個過渡的過程，引入了幀的概念，定義keyframes動畫，而後綁定一個或者多個動畫。transition有點像他的簡化版，animation也能夠實現transition變化某個屬性的功能**

而且能夠去設置動畫的播放時間（animation-duration），播放方式（animation-timing-function，播放速度），播放次數，播放方向（在不一樣次數，發生不一樣方向的動畫，好比從左到右，而後從右到左），播放後的狀態（會到初始狀態，仍是結束狀態）控制動畫狀態（控制某物體暫停或執行動畫）

三者的關係與結合使用？

transition和animation主要區別在哪？

transition也能夠看作animation的縮略版，他們實現的功能有重複的地方，好比說要實現某個div的寬度有30rem變到20rem,二者均可以實現。

//transition的方法
div{width:30rem;transition:width 1s ease}
div:hover{width:20rem}
//animation的方法
div{aninmation:demo 1s ease}
@keyframes mymove
{
from {width:30rem;}
to {width:20rem;}
}

雖然二者有類似的部分，可是實現的概念和出發點是不同的，transition是着重於屬性的變化，而animation重點是在時間軸和關鍵幀,是在於建立幀，讓不一樣幀在不一樣的時間節點發生不一樣變化，基於animation和@keyframe 的動畫一方面也是爲了實現表現與行爲的分離，另外一方面也使得前端設計師能夠專一得進行動畫開發而不是冗餘的代碼中。

如何結合創造出更好的動畫

舉一個製做立方體由小變大，而且在這個過程中翻轉的例子

關於CSS3-3D

1.咱們要使用css-3D效果，首先得去申明，咱們的顯示方式是要3D轉換

//這句話要添加到要作3D轉換元素的父元素上，這樣他的子元素就都支持3D轉換了
transform-style: preserve-3d;

2.設置視點

你們應該都知道透視這麼個東西，往簡單的說就是近大遠小。
舉個例子，爲何女生自拍要躲在背後呢，由於顯得臉小,把手機拿的近一些，屏幕裏面的臉就越大，加上自拍杆呢，臉就越小。
假設你拿着手機呢，那麼你的眼睛就是視點，你設置的perspective的值就是，你眼睛到手機屏幕的水平距離就是，也就是視點到屏幕的值，當perspective的值設置爲0的時候，則不產生近大遠小的效果，比較像平行投影。
若是你把相機拿到45度，像這隻大象同樣仰拍呢，就是調整perspective-origin，相機只能在你面前上下左右的改變角度，而不能從你的背後往前拍，也就是Z座標固定，能夠修改的是相機的X，Y 座標。

3.rotateX/Y/Z究竟是怎麼個轉法
看到張鑫旭-鑫空間-鑫生活這篇裏面講的方式，真的感受這輩子都忘記不了

rotateX：

rotateY：

rotateZ：

構建一個立方體

<div class="cube-section cube-wrap">
    <div class="cube-1 cube">1</div>
    <div class="cube-2 cube">2</div>
    <div class="cube-3 cube">3</div>
    <div class="cube-4 cube">4</div>
    <div class="cube-5 cube">5</div>
    <div class="cube-6 cube">6</div>
</div>
//那麼立方體的左側面要怎麼畫呢？，假設左側面是cube-1
.cube-1{
-webkit-transform:rotatey(90deg) translatez(-100px);

}

像鋼管舞繞圈同樣，先用rotateY繞到與平面垂直的這個地方，能夠想象到，繞的軸心點不變的話，是兩個相互垂直，且中心點相同的平面，然後再用translateZ去調整這個平面的位置關係，這個值呢至關於面和你電腦平面的距離。

經過這種方法呢，能夠構造出其他六個平面

如何讓正方體動起來？

@-webkit-keyframes animation2 {
  0% {
    -webkit-transform: scale(0.2) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transform-origin: center center;
     }
  100% {
    -webkit-transform: scale(0.7) rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    -webkit-transform-origin: center center; 
    } }
    
.active .cube-wrap{
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
   perspective: 0px;
  -webkit-perspective: 0px;
  -moz-perspective: 0px;
  -webkit-animation:annimation2 3s ease ;
  -moz-animation:annimation2 3s ease ;
}

如何控制動畫的播放

CSS動畫通常在頁面加載完就自動播放了，也只有對應的delay屬性可以推遲其發生的時間，可是咱們經常須要控制動畫的播放時間，播放觸發點，好比在點擊的時候，換屏的時候播放動畫，那麼咱們要怎麼作呢？——用Js在特定的時刻添加包含動畫的Class。

.cube-wrap{//設置形狀大小等}
.active .cube-wrap{//設置動畫}
//而後再相應的促發點時，使用js方法X.classList.add("active");

如何讓動畫中止在你想要的任意效果

1.利用.active與transform 動畫播放完畢

.active .cube-wrap {
//無論他怎麼轉，最後轉到哪裏，固定下來的位置就是transform的位置
  -webkit-transform: rotatey(0deg) rotatex(0deg);
}

2.animation-fill-mode
這個設置成backwards可使動畫回到初始模式，設置成forwards：結束後保持動畫結束時的狀態，但當animation-direction爲0，則動畫不執行，持續保持動畫開始時的狀態

3.animation-play-state
檢索或設置對象動畫的狀態，能夠設置運動或者暫停，若是提供多個屬性值，以逗 號進行分隔。

如何每次執行到觸發點的時候都執行一遍動畫？

在ISUX這篇文章裏面提到了，咱們可使用reflow的方式來觸發

$(".cube-section").removeClass("click-animation");
    /*加一句這個觸發reflow*/
    $('.cube-section').innerWidth($('.cube-section').innerWidth);
    $(".cube-section ").addClass("click-animation");

如何更有邏輯的編寫動畫

推薦看看這篇ISUX寫的，感受頗有收穫

效率速度

//使用
.somecss{
transform: translateX(10rem)
}
.active{
transform: translateX(0)!important;
}
//使用tranform的translateX的效率比用transition的left這樣來改變有效率的多

css動畫的優缺點

CSS3動畫確定不是萬能的，由於一些固有的侷限性，也很難百分百的實現AE上全部的動畫效果.好比：

• 實現曲線動畫

• 基於物理的的動畫效果

（這個動畫工具的網站呢提供了大量的基礎動畫，咱們能夠基於這些動畫來作擴展和調整）

可是他簡單，高效，硬件加速等優勢又十分惹人喜好，至於用js仍是用css,更多的是取決於你

參考資料

Myth Busting: CSS Animations vs. JavaScript
經驗分享：多屏複雜動畫CSS技巧三則
CSS Animation
CSS3動畫實踐
高性能CSS3動畫
好吧，CSS3 3D transform變換，不過如此！