解析transform,transition和animation的區別

1. transform

1.1 定義

transform主要用於給元素作變換,主要由如下幾種變換,rotate(旋轉),scale(縮放),skew(扭曲),translate(移動)和matrix(矩陣變換).

語法:

transform: none | transform-functions

none表示不作變換, transform-functions表示變化函數,能夠使一個變換函數或者多個變換函數的組合.

.transform-multi:hover {
  transform: scale(1.2) rotate(30deg);
}
複製代碼

transform-origin轉換基點

transform-origin: x-axis y-axis z-axis;, transform-origin用來定義轉換的基點,默認的轉換基點是元素的中心點,下圖是以右下角爲基點作變換的效果圖.

transform-style定義嵌套元素在三維空間呈現

transform-style: flat|preserve-3d;

• flat: 表示全部子元素在2D平面呈現
• preverse-3d: 表示全部子元素在3D空間中呈現

效果圖:

1.2 使用場景

簡單的羅列api的使用會讓人感受枯燥和無心義,下面我就結合具體的使用場景來實踐transform的一些轉換函數.

1. 使用transition和position: absolute;結合實現水平垂直居中:

html:

<h2 style="padding-top: 20px;">使用transition實現水平垂直居中</h2>
<div class="transform-box">
  <div class="middle-center">
    <p>水平垂直居中</p>
    <p>寬度和高度由子元素撐開</p>
  </div>
</div>
複製代碼

css:

.transform-box {
  width: 200px;
  height: 200px;
  position: relative;
   background-color: #00f;
}
.middle-center {
   background-color: #f00;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
}
複製代碼

效果圖:

2. 定義放大,旋轉,傾斜,矩陣變換等交互效果:

html:

<h2>scale, rotate, skew, martix</h2>
<div class="transform-box">
  <div class="white-container">
    <div class="gray-bg scale">
      <div class="blue-content"> 
      </div>
    </div>
    <p class="info-text">scale(2)</p>
  </div>
  <div class="white-container">
    <div class="gray-bg rotate">
      <div class="blue-content">
        
      </div>
    </div>
    <p class="info-text">rotate(45deg)</p>
  </div>
  <div class="white-container">
    <div class="gray-bg skew">
      <div class="blue-content">
        
      </div>
    </div>
    <p class="info-text">skew(45deg)</p>
  </div>
  
  <div class="white-container">
    <div class="gray-bg matrix">
      <div class="blue-content">
        
      </div>
    </div>
    <p class="info-text">matrix(2, 2, 0, 2, 45, 0)</p>
  </div>
</div>
複製代碼

css:

.transform-box {
  display: flex;
  text-align: center;
  
}
.white-container {
  width: 200px;
  flex: 0 0 200px;
  margin-right: 20px;
  background: #f1f1f1;
}
.gray-bg {
  width: 100px;
  height: 100px;
  margin: 15px auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.blue-content {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
}
.info-text {
  color: #555;
}
.scale:hover .blue-content {
  -webkit-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
}
.rotate:hover .blue-content {
  -webkit-transform: rotate(45deg);
  transform: scale(45deg);
}
.skew:hover .blue-content {
  -webkit-transform: skew(45deg);
  transform: skew(45deg);
}
.matrix:hover .blue-content {
  -webkit-transform: matrix(2, 2, 0, 2, 45, 0);
  transform: matrix(2, 2, 0, 2, 45, 0);
}
複製代碼

效果圖:

值得一提的是若是有須要,咱們能夠使用matrix做出很是複雜的矩陣變換,有興趣的同窗能夠研究一下：CSS3 Transform Matrix

3. 用js來動態改變transform的屬性值實現動畫的過渡效果:

咱們以小球下落的動效來作示例:

html:

<h2>Js操做元素的transform屬性值實現小球下落動效</h2>
<button class="boll-btn" id="boll-btn">小球下落</button>
<div class="boll" id="boll"></div>
複製代碼

css:

.boll-btn {
  width: 100px;
  height: 30px;
  line-height: 28px;
  border: none;
  border-radius: 5px;
  color: #555;
  margin-bottom: 10px;
}
.boll {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #03A9F4;
  transform: translateY(0px);
  margin-bottom: 300px;
}
複製代碼

js:

const domBoll = document.getElementById('boll')
document.getElementById('boll-btn').onclick=function() {
  let distance = 0
  let timer = setInterval(() => {
 
  if(distance >= 300) {
     clearInterval(timer)
     }  domBoll.style.transform = 'translateY('+ distance++ +'px)'
  }, 30)
}
複製代碼

效果圖:

若是須要的話,能夠使用translate3d,rotate3d等API將元素提高爲合成層,開啓硬件加速渲染,但開啓硬件加速渲染以後,有些時候可能會致使瀏覽器頻繁閃爍或抖動，能夠嘗試如下辦法解決：

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
複製代碼

2. transition

2.1 定義

語法:

transition: property duration timing-function delay;

用來定義某個css屬性或者多個css屬性的變化的過渡效果.

屬性定義及使用說明:

值	描述
transition-property	指定CSS屬性的name，transition效果: 大小,位置,扭曲等
transition-duration	規定完成過渡效果須要花費的時間（以秒或毫秒計）。 默認值是 0，意味着不會有效果。
transition-timing-function	指定transition效果的轉速曲線
transition-delay	定義transition效果開始的時候

transition-property:

屬性值:

• none: 沒有屬性得到過渡效果
• all: 全部屬性的變化都得到過渡效果
• property: 特定屬性變化得到過渡效果,如: width, height,opacity等.

transition-timing-function:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

屬性值:

• linear: 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）;
• ease: 規定慢速開始，而後變快，而後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）;
• ease-in: 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）;
• ease-out: 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）;
• ease-in-out: 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）
• cubic-bezier(n,n,n,n): 在 cubic-bezier 函數中定義本身的值。可能的值是 0 至 1 之間的數值

2.2 使用場景

1. 實現激活狀態的過渡效果(寬度和透明度變化):

html:

<h2>transition: width&opacity</h2>
<p class="transition-p">菜單一</p>
複製代碼

css:

.transition-p {
  width: 100px;
  height: 40px;
  opacity: 0.6;
  border-radius: 10px;
  background: #03A9F4;
  text-align: center;
  line-height: 40px;
  color: #fff;
  transition: all 0.5s ease-in;
}
.transition-p:hover {
  opacity: 1.0;
  width: 120px;
}
複製代碼

效果圖:

2. transition和transform結合實現動畫過渡

html:

<h2>利用transition和transform結合實現動畫過渡</h2>
<div class="boll1" id="boll1"></div>
複製代碼

css:

.boll1 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #03A9F4;
  transform: translateY(0px);
  margin-bottom: 300px;
  transition: all cubic-bezier(0.42,0,0.58,1) 2.0s 1.0s;
  cursor: pointer
}
.boll1:hover {
  transform: translateY(200px);
}
複製代碼

效果圖:

平常的菜單交互,鼠標移進放大,小球下落等交互均可以使用transition實現,transition通常只有兩個狀態,始態和終態.通常只有兩個狀態的單次動畫交互使用transition.

3. animation

3.1 定義

animation動畫的定義,先經過@(-webkit-)keyframes定義動畫名稱及動畫的行爲,而後再經過animation的相關屬性定義動畫的執行效果.

語法:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

用來定義多箇中間態的一系列的動畫過渡效果.

屬性定義及使用說明:

值	描述
animation-name	指定要綁定到選擇器的關鍵幀的名稱
animation-duration	規動畫指定須要多少秒或毫秒完成
animation-timing-function	設置動畫將如何完成一個週期
animation-delay	設置動畫在啓動前的延遲間隔
animation-iteration-count	定義動畫的播放次數
animation-direction	指定是否應該輪流反向播放動畫
animation-fill-mode	規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式
animation-play-state	指定動畫是否正在運行或已暫停
initial	設置屬性爲其默認值, 閱讀關於 initial的介紹
inherit	從父元素繼承屬性, 閱讀關於 initinherital的介紹

其中animation-name指向的是@keyframes定義的動畫.

@keyframes:

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需, 定義動畫的名稱
keyframes-selector	必需, 定義動畫的多箇中間態 合法值: 0-100% from(和0%相同) to(和100%相同)
css-styles	必需的, 一個或多個合法的CSS樣式屬性

3.2 使用場景

1. 定義一個循環自動執行的過渡動畫(還記得春晚的小彩旗嗎?)

html:

<h2>定義一個循環自動執行的過渡動畫</h2>
<div class="animation-container" >
  <div class="animation-infinite">
    循環自動執行的過渡動畫
  </div>
</div>
複製代碼

css:

.animation-container {
  position: relative;
  padding-bottom: 50px;
}
.animation-infinite {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 50px;
  padding: 10px;
  background: #03A9F4;
  color: #fff;
  animation: move-to-right 2.0s infinite;
}
/* 定義右移動畫 */
@keyframes move-to-right {
  0% {
    opacity: 1.0;
    width: 100px;
    left: 0;
  }
  25% {
    opacity: 0.4;
    width: 120px;
    left: 40px;
  }
  50% {
    opacity: 0.6;
    width: 150px;
    left: 80px;
  } 
  75% {
    opacity: 0.8;
    width: 120px;
    left: 40px;
  }
  100% {
    opacity: 1;
    width: 100px;
    left: 0;
  }
}
複製代碼

效果圖:

2. 定義多個動畫的串聯執行

html:

<h2>animation定義多個動畫的串聯執行</h2>
<div class="animation-container" >
  <div class="animation-infinite1">
    多個動畫的串聯執行
  </div>
</div>
複製代碼

css:

.animation-container {
  position: relative;
  padding-bottom: 150px;
}
.animation-infinite1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 50px;
  padding: 10px;
  background: #03A9F4;
  color: #fff;
  animation: to-right 2.0s ease-in,to-bottom 1.0s ease-in 2.0s,to-left 2.0s ease-in 3.0s,to-top 2.0s ease-in 5.0s;
  
}
@keyframes to-right {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 0;
    left: 200px;
  }
} 
@keyframes to-bottom {
  0% {
    top: 0;
    left: 200px;
  }
  100% {
    top: 100px;
    left: 200px;
  }
} 
@keyframes to-left {
  0% {
    top: 100px;
    left: 200px;
  }
  100% {
    top: 100px;
    left: 0;
  }
} 
@keyframes to-top {
  0% {
    top: 100px;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
} 
複製代碼

效果圖:

和transform同樣,咱們能夠將animation動畫定義在一個class上,而後經過js操做給某個元素加上對應的類,從而觸發動畫的執行,咱們能夠靈活的進行多個動畫的切換,控制動畫的執行次數等.

總結

transform, transition 和animation的區別:

• transform自己是沒有過渡效果的,它只是對元素作大小,旋轉,傾斜等各類變換,經過和transition或者animation相結合,可讓這一變換過程具備動畫的效果,它一般只有一個到達態,中間態的過渡能夠經過和transition或者animation相結合實現,也能夠經過js設置定時器來實現.
• transition通常是定義單個或多個css屬性發生變化時的過渡動畫,好比width,opacity等.當定義的css屬性發生變化的時候纔會執行過渡動畫,animation動畫一旦定義,就會在頁面加載完成後自動執行.
• transition定義的動畫觸發一次執行一次,想要再次執行想要再次觸發.animation定義的動畫能夠指定播放次數或者無限循環播放. transition: 須要用戶操做,執行次數固定.
• transition定義的動畫只有兩個狀態,開始態和結束態,animation能夠定義多個動畫中間態,且能夠控制多個複雜動畫的有序執行.

ps: 對這篇文章中的使用場景部分,我僅寫出來在我平時工做中會用到的一些場景,歡迎在評論區留言分享大家的一些動畫使用場景,供你們學習~ 示例源代碼地址

一塊兒進步,願咱們都能成爲更好的本身~

往期回顧

• 爲何單頁面的seo不友好？如何解決這一問題？
• 打牢基礎系列：JavaScript的變量和數據類型
• 精讀源碼系列: Vue中DOM的異步更新及Vue.nextTick()原理解析
• 精讀源碼系列: 前端路由Vue-Router
• 打牢基礎系列: JavaScript的類繼承
• postMessage可太有用了
• 在vue中使用SockJS實現webSocket通訊