CSS 怎樣寫一個動畫（從基礎動畫到3d動畫)

以前看過許多教學視訊，大部分講師都是講個大概，然後就開始無厘頭的灌輸知識了。直到我後來看到一位優秀講師的視訊，他的講課模式是第一堂課展示成果。這樣下來，當我看到最終效果，我就有心思去不斷學習這個東西了。

今天我就效仿這位講師的模式，話不多說，上效果~~

1. 簡單的漸變動畫

2. 稍複雜的關鍵幀動畫

3. 結合transform 實現3d動畫效果

看起來還行，學起來也非常容易。

那我們們就一步一步來玩把~~

transition

transition 是 css3 的一大亮點，他常用的大概有以下一些屬性：

• transition-property  --規定設定過渡效果的 CSS 屬性的名稱
  
• transition-duration  --規定完成過渡效果需要多少秒或毫秒
  
• transition-timing-function  --規定速度效果的速度曲線
  
• transition-delay  --定義過渡效果何時開始

大致程式碼如下，省略部分程式碼：

button {
  ...
  background-color: red;
  transition-property: opacity, background-color, border-radius; /* 列表以逗號分隔 */
  transition-duration: 0.5s;
  transition-timing-function: ease; /* 預設速度效果 */
  transition-delay: 1s;
  ...
}
button:hover {
  ...
  opacity: 0.3;  background-color: #fff000;
  border-radius: 100px;
  ...
}複製程式碼

當然，這樣寫起來有些麻煩，當然你可以簡化：

button { 
 background-color: red; 
 transition: opacity  0.5s 1s ease, background-color  0.5s 1s ease, border-radius  0.5s 1s ease; 
}複製程式碼

以上程式碼每個逗號隔開4個引數，分別為 CSS 屬性、過渡時間、停頓開始時間、速度曲線。 看起來好像還有點麻煩誒：

button {
  ...  
  background-color: red;  
  transition: all 0.5s 1s ease;
  ...
}複製程式碼

這樣看起來是不是簡單多了呢？因為在大部分情況下，我們動畫的多種效果一般是同時進行，同時消失的，如果時間不同會變成怎樣的一個效果嘞？

transition: opacity  0.5s 1s ease, background-color  1.5s 2s linear, border-radius  0.5s cubic-bezier(0.215, 0.610, 0.355, 1);複製程式碼

所以因此我們可以用一個all便把所有相同效果的css屬性代替啦~

嘻嘻，這樣是不是又好看，程式碼還簡潔呢？

對於 transition-timing-function 這裡給大家推薦一個很好用的網站，可以隨意除錯你想要的貝塞爾速度曲線，點選GO！檢視效果。複製最上面的程式碼，就可以使用到你的程式碼啦~

點選這裡： 我也要去看看效果！

• animation-name  --規定需要繫結到選擇器的 keyframe 名稱
• animation-duration  --規定完成動畫所花費的時間，以秒或毫秒計
• animation-timing-function  --規定動畫的速度曲線
• animation-delay  --規定在動畫開始之前的延遲
• animation-iteration-count  --規定動畫應該播放的次數
• animation-direction  --規定是否應該輪流反向播放動畫
• animation-play-state  -- paused|running  屬性規定動畫正在執行還是暫停
  

一個一個寫還是會略顯複雜，這裡就直接最終程式碼效果啦~

button{
  animation: ani 5s 2s infinite ease;
}

@keyframes ani {
  20%{    opacity: 0.3;  }
  40%{    border-radius: 100px;  }
  60%{    background-color: #fff000;  }
}複製程式碼

這裡的keyframes就像是你宣告瞭一個動畫函式，ani就是你的函式名。animation就是去這個button中去執行函式。5個引數分別代表 動畫函式名、過渡時間、停頓開始時間、動畫的次數（infinite代表無限）、速度曲線。

animation+transform 3d動畫

終於到達最激動人心的時刻了。前面的簡單動畫可能大部分人都會，不過3d動畫可能還是有少數人使用的，它涉及一些3d思想，可能對一些童鞋們較為抽象。不過今天我們們就一點點的來學。其實也很簡單~~

話不多說，我們們要實現一個正方體，當然是需要6個平面嘛？（emmmm 這不廢話，幼兒園就會了）；

老闆，給我來六個花花綠綠的div！

<p>客觀，您要的div：</p>
<div class="aniBox">  
  <div class="ani1"></div> 
  <div class="ani2"></div>
  <div class="ani3"></div>
  <div class="ani4"></div>
  <div class="ani5"></div>
  <div class="ani6"></div>
</div>

.aniBox {
  width: 220px;
  height: 220px;
}
.aniBox>div {
  width: 100%;
  height: 100%;
}
.ani1 {
  background: #4879dc;
}
.ani2 {
  background: #3bd168;
}
.ani3 {
  background: #e31653;
}
.ani4 {
  background: #1ed3eb;
}
.ani5 {
  background: #e9c80f;
}
.ani6 {
  background: #821fd3;
}複製程式碼

好嘞客官，這是您的div，我給您放到一個大div裝好了~~

這裡是效果圖。。。。

？？？

emmmm 老闆，都從袋子出來了，給我包好~~

.aniBox {
  position: relative;
  width: 220px;
  height: 220px;
}
.aniBox>div {
  position: absolute;
  width: 100%;
  height: 100%;
}複製程式碼

好了，6個div都放到一起啦，開始搞6個面嘍；用transform來旋轉位移它。

中間的紅色，你可以想象成文件流的平面。現在想要將第一個面向前移動div一半的距離：

.ani1 {
  background: #4879dc;
  transform: translateZ(110px) /*前*/
}複製程式碼

咦 好像沒什麼變化哎，我明明把 #4879dc  顏色的移動到最前面的位置了呀？經過研究，最後我找到了一個屬性transform-style: preserve-3d，這個屬性規定如何在 3D 空間中呈現被巢狀的元素。必須設定在父元素身上，並且父元素有轉換(就是有變形)，並且子元素也得有轉換(變形)才能看得到效果。

• transform-style: flat  --子元素將不保留其 3D 位置 
• transform-style: preserve-3d  --子元素將保留其 3D 位置

┗|｀O′|┛ 嗷~~ 這樣就懂啦：

.aniBox {
  position: relative;
  transform-style: preserve-3d;
  width: 220px;
  height: 220px;
}複製程式碼

哈哈哈，效果出來了。

好的！ 開始其他的五個面~~~

.ani2 {
  background: #3bd168;
  transform: translateZ(-110px)  /*後*/
}
.ani3 {
  background: #e31653;
  transform: rotateY(90deg) translateZ(110px)  /*右*/
}
.ani4 {
  background: #1ed3eb;
  transform: rotateY(-90deg) translateZ(110px)  /*左*/
}
.ani5 {
  background: #e9c80f;
  transform: rotateX(90deg) translateZ(110px)  /*上*/
}
.ani6 {
  background: #821fd3;
  transform: rotateX(-90deg) translateZ(110px)  /*下*/
}複製程式碼

咦，好像被擋住了看不出什麼效果誒~~~ 算了 我們們直接在控制檯玩把：

哈哈，成功了，看起來有效果了，好了 我們們給他加上動畫把~~

.aniBox {
  position: relative;
  margin: 30px auto;
  transform-style: preserve-3d;
  width: 220px;
  height: 220px;
  animation: box-3d 5s infinite;
}
@keyframes box-3d {
  100% {
    transform: rotateX(360deg) rotateZ(-720deg)
     /* 讓他的結束角度 都為360的整數倍，這樣他就可以看起來無縫銜接 */  
  }
}複製程式碼

咦，這個動畫好像先快後慢誒？加個linear把 這樣就看起來均勻了：

.aniBox {
  animation: box-3d 5s infinite linear;
}複製程式碼

本來以為已經完工了，可是總覺得有點不對勁。網上找了找，嗷~~還差一個近大遠小的效果！

既然是房間，那就需要包裝一下這個立方體咯~：

<div class="perBox">
      <div class="aniBox">
        <div class="ani1"></div>
        <div class="ani2"></div>
        <div class="ani3"></div>
        <div class="ani4"></div>
        <div class="ani5"></div>
        <div class="ani6"></div>
      </div>
</div>

.perBox {  perspective: 800px;}複製程式碼

是不是立體了好多呢？？？？

什麼 看起來沒啥效果？？？

這好辦，你想想，加入一個杯子放在一間屋子的最中間，而你站在房屋的窗玻璃處，是不是房屋越小，你看著越具體？ 好的 我們們把房屋弄小一點把！

.perBox {  perspective: 400px;}複製程式碼

哦吼吼~~夠立體了把！ ？

什麼你想看這個盒子內部？ 這個div的寬為220px，一半也就是110px;

那麼，只要我們們小於110px，就能看裡面了把？  試試來~~

.perBox {  perspective: 100px;}複製程式碼

、

啊哈哈哈，有沒有暈？有沒有顯示卡燃燒的感覺！！！？

燃燒你的GPU！

我們們的動畫也就講到這啦，下來我們們看看perspective這玩意的相容性：

哦no~  可怕 。

附加 幾個好玩的 demo：

github.com/evelope/CSS…

github.com/evelope/My-…