CSS3動畫：動畫(animation)、過渡(transtion)、變形（transform）

製作動畫有兩種方法：1、animation+@keyframes，2、通過transition

animation+@keyframes

先看一個列子：

 

 

@keyframes moveX {
  50% {
    transform: translateX(200px);
  }
  100% {
    background-color: rgb(92, 19, 228);
  }
}
#test {
  width: 100px;
  height: 100px;
  background-color: brown;
  animation: moveX 2s linear both;
}

@keyframes：

CSS動畫，也稱關鍵幀動畫。通過 @keyframes 來定義關鍵幀， @keyframes後面定義動畫的名字。開發者不需要給出每一幀的定義。只需要定義一些關鍵的幀即可。因爲其餘的幀，瀏覽器會根據計時函數插值計算出來。可以通過百分比定義多個關鍵幀。

animation：

animation屬性是以下8個屬性的簡寫：

animation-name	規定需要綁定到選擇器的 keyframe 名稱。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。默認是ease。 linear、ease、ease-in、ease-out、ease-in-out 以上是貝塞爾曲線，另外它還有一個steps()函數，設定動畫的步數 #test{animation: moveX 2s steps(2) both;}
animation-delay	規定在動畫開始之前的延遲。
animation-iteration-count	規定動畫應該播放的次數。無限播放時使用infinite
animation-direction	指定動畫播放的方向，默認爲normal。 normal：默認值。 reverse： 表示動畫反向播放。 alternate： 表示正向和反向交叉進行。 alternate-reverse： 表示反向和正向交叉進行。
animation-play-state	指定動畫播放狀態。 running：表示播放 paused：表示暫停 #test:hover { animation-play-state: paused; }
animation-fill-mode	指定動畫填充模式，規定元素開始前和結束後處於什麼狀態。默認值爲none none：動畫完成後回到第一幀的狀態 forwards：動畫完成後元素狀態保持爲最後一幀的狀態 backwards：有動畫延遲時，動畫開始前，元素狀態保持爲第一幀的狀態 both:上述兩者效果都有

在同一個元素上可以應用多個動畫，中間用逗號隔開

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes color {
  50% {
    background: #06c;
  }
}
@keyframes width {
  100% {
    width: 300px;
  }
}
#test {
  width: 100px;
  height: 10px;
  background: brown;
  animation: rotate infinite, color infinite, width infinite;
  animation-duration: 2s;
  animation-direction: normal, normal, alternate;
}

例子：用動畫實現的進度條效果

@keyframes moveX {
  100% {
    background-size: 100%;
  }
}
/* background-size和 background-repeat要放在background的後面*/
#test {
  width: 300px;
  height: 20px;
  border: solid 1px;
  background: linear-gradient(to right, #f60, rgb(149, 60, 1));
  background-repeat: no-repeat;
  background-size: 0;
  animation: moveX 5s linear forwards;
}

transition

#test {
  height: 20px;
  background: red;
  /* all表示所有的屬性都需要應用動畫，此處只有width才需要應用，所以可以寫成width */
  /* transition: all linear 1s; */
  transition: width linear 1s;
  width: 100px;
}
#test:hover {
  width: 300px;
}

transition是以下四個屬性的簡寫

transition-property	指定需要應用動畫的css屬性名，如果是all，則表示所有的屬性都可以應用
transition-duration	需要指定多少秒或毫秒才能完成
transition-timing-function	規定動畫的速度曲線。默認是ease。 linear、ease、ease-in、ease-out、ease-in-out 以上是貝塞爾曲線，另外它還有一個steps()函數，設定動畫的步數 #test{transition: all steps(3) 1s;} 跟animation-timing-function的值一樣
transition-delay	規定在動畫開始之前的延遲。

變形：transform屬性

移動translate	translate(x,y)：在x軸和y軸上同時移動	transform: translate(100,200);
	translateX(x)：在x軸上移動
	translateY(y)：在y軸上移動
旋轉rotate	rotate(<angle>) ：通過指定的角度參數對原元素進行2D 旋轉	transform:rotate(30deg);
縮放scale	scale(x,y)：在x軸和y軸上同時縮放	transform: scale(0.5, 0.5);
	scaleX(x) ：在x軸上縮放
	scaleY(y) ：在y軸上縮放
扭曲skew	skew(x,y)：在x軸和y軸上同時扭曲	transform:skew(30deg,10deg)；
	skewX(<angle>) ：在x軸上扭曲
	skewY(<angle>) ：在y軸上扭曲
矩陣變形matrix	matrix(<number>, <number>, <number>, <number>, <number>, <number>) ： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣。

默認情況下，變形是以元素的中心點爲基準的，可以通過transform-origin來改變基準點，下面看看其使用規則：

transform-origin(X,Y):用來設置元素運動的基準點。默認點是元素的中心點。其中X和Y的值可以是百分值,em,px，其中X也可以是字符參數值left,center,right；Y和X一樣除了百分值外還可以設置字符值top,center,bottom。

/* 以左上角爲基準點進行縮放 */
#test {
  height: 200px;
  background: red;
  transition: all linear 1s;
  width: 200px;
  transform-origin: left top;
}
#test:hover {
  transform: scale(0.5, 0.5);
}