CSS的Transition與Animation

博客連接： CSS的Transition與Animation

本文總結CSS3中兩個用來作動畫的屬性，一個是transition，另外一個是animation。

差別比較

CSS3	差別
transition	在給定的持續時間內平滑地更改屬性值（從一個值到另外一個值），也就是隻須要指定開始與結束的參數，參數改變時就觸發動畫。
	經常使用語鼠標事件（:hover、active、:focus、:click）或鍵盤輸入時觸發
	須要事件觸發，沒法在網頁加載時自動發生。一次性，不能重複發生，除非一再觸發。
	只能定義開始狀態和結束狀態，不能定義中間狀態。
animation	能夠自行寫動畫開始、進行間、結束時各階段的變化，適合用來作較細微的動畫表現。須要明確的指定關鍵幀（@keyframe）的參數。
	網頁加載時會直接執行，能夠自行控制各階段動畫的變化

animation和 transition最大的不一樣在於 transition是當參數改變時觸發，而 animation則是直接就執行，全部動畫效果須要明確的指定關鍵幀的參數。

CSS3	簡寫順序
transition	property名稱timing-function特效
animation	name名稱timing-function特效
	iteration-count次數fill-mode填充模式

瀏覽器支持

transition寫法

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  transition: width 2s ease-in 2s;
}

.box:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

animation寫法

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  animation: change 5s; /*8個屬性中至少要有名稱、時間*/
}

/*設定開始與結束狀態*/
/*from 就是0%，to 就是100%*/
@keyframes change {
  from {
    background-color: #4BC0C8;
  }
  to {
    background-color: #C779D0;
  }
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  animation: change 5s; /*8個屬性中至少要有名稱、時間*/
}

/*設定開始與結束狀態*/
/*from 就是0%，to 就是100%*/
@keyframes change {
  0% {
    background-color: #4BC0C8;
  }
  20% {
    background-color: #C779D0;
  }
  60% {
    background-color: #FEAC5E;
  }
  80% {
    background-color: #185a9d;
  }
  100% {
    background-color: #4BC0C8;
  }
}

屬性	值
animation-name	@keyframes後的名稱
animation-duration時間	time以秒計算，如3s initial預設值inherit繼承父層
animation-timing-function特效	linear等速、ease、ease-in、ease-out、ease-in-out、step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)可上官網取值使用
animation-delay	以秒計算，如2s
animation-iteration-count次數	number預設值爲1，所以填2時，動畫跑的次數爲1+2=3次infinite無限循環
animation-direction方向	normal、reverse反向、alternate先反後正
animation-fill-mode	forwards使用關鍵幀最後的值backwards使用最開始的值both
animation-play-state播放狀態	pause暫停running爲預設值initial預設值、inherit繼承父層

Animation.css

官網下載：Animate.css
GitHub：Animate.css 使用說明