本文總結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

自己是一個五年的前端工程師,希望本文對你有幫助！

這裡推薦一下我的前端學習交流扣qun：731771211 ，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術