全面梳理 CSS3 動畫

liangtongzhuo發表於2017-12-30
CSSS3動畫

前言

主要內容：CSS3 動畫有那些屬性？動畫怎麼實現，幾種方法？javaScript 與它優缺點？

目錄

  1. 2D 屬性
  2. 3D 屬性
  3. transition 動畫
  4. keyframes
  5. 優缺點總結

1. 2D 屬性

我用了 transition 與 hover 詮釋這幾個 2D 屬性，windth、height 其它很多導致外觀變化的屬性幾乎都可以變成動畫。

掘金不能鑲嵌 iframe，就看不見動畫效果了， 你可以到我的部落格看這篇文章 ：http://liangtongzhuo.com/atricle.html?5a46f1039f545400454bfc6e

備註程式碼

<div class="translate">transform: translate(5px,5px); 位移</div>
<div class="rotate">transform: rotate(30deg); 旋轉</div>
<div class="scale">transform: scale(2,4); 放大縮小</div>
<div class="skew">transform: skew(0deg,90deg);  Y 傾斜角 30 度，不常用</div>
<div class="matrix">transform:matrix(0.866,0.5,-0.5,0.866,0,0);矩陣 不常用，但很厲害。</div>


div {
  background-color: 	#87CEFA;
  margin-top:30px;
  transition: 2s;
}

.translate:hover{
  transform: translate(5px,5px);
 }
 
.rotate:hover{
transform: rotate(30deg); 
}

.scale:hover{
transform: scale(2,4); 
}

.skew:hover{
transform: skew(0deg,30deg);
}

.matrix:hover{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
複製程式碼

還有一個 transform-origin 屬性，示例程式 http://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html

2. 3D 屬性

3D 屬性幾個和上邊幾乎是相似的， 3D 還牽扯到透視問題以後再說（https://developer.mozilla.org/en-US/docs/Web/CSS/perspective）

程式碼備註

<div class="rotateX">transform: rotateX(60deg); x 軸 3D 旋轉</div>
<div class="rotateY">transform: rotateY(60deg); y 軸 3D 旋轉</div>
div {
  background-color: 	#87CEFA;
  margin-top:30px;
  transition: 2s;
}

.rotateX:hover{
transform: rotateX(60deg);
  }
  
  .rotateY:hover{
transform: rotateY(60deg);
  }
  

複製程式碼

3. transition 動畫

程式碼備註 ```
div { background-color: #87CEFA; margin-top:30px; width:50px; height:50px; transition: 1s 0.5s width linear; }

.rotateX:hover{ width: 100px; }

transition 動畫時間1秒，延遲0.5秒執行 ，只有 width 執行動畫， linear 勻速動畫
複製程式碼

（1）linear：勻速 （2）ease-in：加速 （3）ease-out：減速 （4）cubic-bezier函式：自定義速度模式 自定義速度 http://cubic-bezier.com/#.17,.67,.83,.67



#  4. keyframes 
<iframe width="100%" height="300" src="//jsfiddle.net/liangtongzhuo/vvdjnuvo/2/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>
複製程式碼

animation-name 規定 @keyframes 動畫的名稱。 animation-duration 規定動畫完成一個週期所花費的秒或毫秒。預設是 0。 animation-timing-function 規定動畫的速度曲線。預設是 "ease"。 animation-delay 規定動畫何時開始。預設是 0。 animation-iteration-count 規定動畫被播放的次數。預設是 1。 animation-direction 規定動畫是否在下一週期逆向地播放。預設是 "normal"。 animation-play-state 規定動畫是否正在執行或暫停。預設是 "running"。


# 5. 優缺點總結

優點：CSS3 能很方便的做出動畫， 並不需要修改 DOM 和書寫 JavaScript 非常便捷。尤其是配合 hover，來寫滑鼠移動的特效。
缺點：CSS3 對點選事件獲取當前動畫執行時間與效果是不清楚，不能根據當前動畫執行狀態判斷邏輯。複製程式碼

相關文章