[CSS筆記] transition、transform、animation 動畫屬性

1.transition

功能：

• 改變目標元素的樣式時，像是顏色、外觀、大小等等
• 需要搭配 pseudo class (偽類)使用
• 一定要有 transition-property 和 transition-duration

屬性：

• transition-property: 轉場動畫的樣式
• transition-duration: 轉場所需要的時間
• transition-timing-function: 轉場的時間曲線
• transition-delay: 要延遲多久轉場

常用的 transition-timing-function 屬性值：

1. linear（等速）
2. ease（預設值，緩入、中間快、緩出）
3. ease-in（緩入）
4. ease-out（緩出）
5. ease-in-out（緩入、緩出）

搭配 pseudo class (偽類)使用：

一般會在原本的狀態中加上 transition 屬性，在觸發 pseudo class (偽類)中加上樣式改變後的設定。

div {   /*原本的狀態*/

　　width: 100px;

　　height: 100px;

　　background: red;

　　transition-property: width;/*div元素中要轉場的width屬性*/

　　transition-duration: 2s;/*轉場時間為2秒*/

　　transition-timing-function: linear;/*轉場速度為均速*/

　　transition-delay: 1s; /*延後1秒才開始轉場*/

}



div:hover { /*搭配偽類hover使用*/

　　width: 300px; /*被指定的width屬性的新數值*/

}

縮寫：

transition 屬性可以分開寫，也可以合併在一起，但是縮寫有以下的固定順序。

transition-property、transition-duration、transition-timing-function、transition-delay

下面這個例子：

transition: box-shadow 1s linear 1s

這句的 transition 屬性順序是 box-shadow（transition-property）、1s（transition-duration）、linear（transition-timing-function）、1s（transition-delay）

因為 transition-duration 和 transition-delay 這兩個屬性都是時間數值，所以單寫一個時間數值的時候，是指 transition-duration。如果寫兩個時間數值，前面的是 transition-duration，後面的是 transition-delay。

分開的寫法：

div {

  width: 100px;

  height: 100px;

  background: red;

  transition-property: width;

  transition-duration: 2s;

  transition-timing-function: linear;

  transition-delay: 1s; 

}

div:hover { 

  width: 300px; 

}

合併的寫法：

div {

  width: 100px;

  height: 100px;

  background: red;

  transition: width 2s linear 1s;

}

div:hover {

  width: 300px;

}

上面的例子翻譯成中文：當滑鼠移動到長寬都是 100 的紅色方塊上，方塊會在一秒後，以等速且花兩秒的時間，讓寬度變成 300。

設定多個屬性：

如果要同時設定一個元素裡的多個transition屬性，就要用「逗號」隔開。

div {

　　width: 100px;

　　height: 100px;

　　background: red;

　　transition: width 2s, height 4s; /＊為div元素中的width屬性指定持續時間為2秒的過渡效果、height屬性指定持續時間為4秒的過渡效果*/

}



div:hover {

　　width: 300px;

　　height: 500px;

}

雙向和單向 transition 動畫設定方式：

雙向的寫法： 將 transition 屬性寫在原本的狀態（div元素）中，讓 div 元素來回都有轉場效果。

div {

　　width: 100px;

　　height: 100px;

　　background: red;

　　transition: width 2s, height 4s; 

}



div:hover {

　　width: 300px;

　　height: 500px;

}

單向的寫法： 將 transition 屬性寫在有觸發狀態（hover）的 div 元素中，div 元素只有在開始的時候有轉場效果。

div { 

　　width: 100px; 

　　height: 100px; 

　　background: red;  

}  

div:hover { 

　　transition: width 2s, height 4s;

　　width: 300px; 

　　height: 500px; 

}

不同的雙向 transition 動畫設定方式：

如果雙向的動畫效果不一樣的時候，可以在原本的狀態（div元素）中，設定返回時的 transition 屬性，在有觸發狀態（hover）的 div 元素中，設定開始時的 transition 屬性。

div {

width: 100px;

height: 100px;

background: red;

transition: width 5s, height 5s; /*返回的transition屬性*/

}



div:hover {

transition: width 2s, height 2s; /*開始的transition屬性*/

width: 300px;

height: 500px;

}

2.transform

功能：

• 讓目標元素變形，像是位移、旋轉、傾斜、縮放等等
• 需要搭配 pseudo class (偽類)使用，才有動畫效果
• 搭配 transition 使用，才有轉場效果
• 有 3D 動畫效果

樣式：

• translate(x,y)：位移（x0 向右位移，y0 向下位移）
• scale(x,y)：縮放（如果 x 和 y 縮放倍率相同，只需要放一個數字）
• rotate(deg)：旋轉
• skew(x,y)：傾斜

設定多個樣式：

如果要同時設定一個元素裡的多個 transform 樣式，就要用「空格」隔開。

div {

　　width: 100px;

　　height: 100px;

　　background: red;

}



div:hover {

　　transform:translate(50px,50px) rotate(90deg);

}

搭配 pseudo class (偽類)使用：

一般會在觸發 pseudo class (偽類)中加上 transform 樣式，產生動畫效果。

div {

　　width: 100px;

　　height: 100px;

　　background: red;

}



div:hover {

　　transform:translate(50px,50px) rotate(90deg);

}

上面的例子翻譯成中文：當滑鼠移動到長寬都是 100 的紅色方塊上，方塊會立刻向右移動 50，向下移動 50，且向右旋轉 90。

如果沒有搭配 pseudo class (偽類)使用，直接將 transform 樣式加在原本的狀態中，只是改變樣式，不會產生動畫效果。

div {  

　　width: 100px;  

　　height: 100px;  

　　background: red; 

　　transform:translate(50px,50px) rotate(90deg);

}  

上面的例子翻譯成中文：在向右 50，以及向下 50 的位置上，有一個長寬都是 100 ，且向右旋轉 90 的紅色方塊。

搭配 transition 的轉場效果：

要注意的是 transition 的 property 是 transform。

div { 　　

　　width: 100px; 　　

　　height: 100px; 　　

　　background: red; 

　　transition: transform 1s;

}

div:hover { 　　

　　transform:translate(50px,50px) rotate(90deg);

}

上面的例子翻譯成中文：當滑鼠移動到長寬都是 100 的紅色方塊上，方塊會花一秒的時間向右移動 50，向下移動 50，且向右旋轉90。

3.animation

功能：

• transition 不夠用的時候，就可以使用 animation
• 需要搭配 keyframes 使用，來控制 CSS 屬性做變化，以及做了多少變化
• 一定要有 animation-property 和 animation-duration
• 不需要搭配 pseudo class (偽類)使用，所以載入網頁後，動畫就開始
• 可設定動畫重複次數（animation-iteration-count）

屬性：

• animation-name: 動畫名稱（可自行取名）
• animation-duration: 動畫播放一次的時間（預設0）
• animation-timing-function: 動畫播放的時間曲線（預設none）
• animation-delay: 延遲多久才播放動畫
• animation-iteration-count:動畫播放次數（預設1、infinite連續播放不停止）
• animation-direction:動畫播放方向（預設normal）
• animation-fill-mode:動畫播放前後狀態（預設none）
• animation-play-state:動畫播放或暫停（預設running）

常用的 animation-direction 屬性值：

1. normal（預設值、正向播放）
2. reverse（逆向播放）
3. alternate （一次正向、一次逆向播放，如果播放次數設定為偶數，最後一次會是逆向播放，如果播放次數設定為奇數，最後一次會是正向播放）
4. alternate-reverse（和 alternate 相反，先逆向，在正向播放）

div {

  width: 100px;

  height: 100px;

  background-color: red;

  position: relative;

  animation-name: example;

  animation-duration: 4s;

  animation-iteration-count: 2;

  animation-direction: alternate;  

}

@keyframes example {

  0%   {background-color:red; left:0px; top:0px;}

  25%  {background-color:yellow; left:200px; top:0px;}

  50%  {background-color:blue; left:200px; top:200px;}

  75%  {background-color:green; left:0px; top:200px;}

  100% {background-color:red; left:0px; top:0px;}

}

搭配 ＠keyframes 使用：

一般會在原本的狀態中加上 animation 屬性，在 @keyframes 加上要控制 CSS 屬性做變化的設定。

＠keyframes的格式： 下面的格式可能看不懂，可以再往下直接看下面的例子。

＠keyframes animation-name{ /*animation-name 動畫名稱*/

　　keyframes-selector{ /*關鍵影格選擇器，可以是from-to，也可以是百分比*/

　　　　css-styles; /*CSS樣式*/

　　}

}

keyframes-selector（關鍵影格選擇器）：from-to

div {

　　width: 100px;

　　height: 100px;

　　background: red;

　　animation:move 2s infinite; 

}

@keyframes move{

　　from{

　　　　left:0;

　　}

　　to{

　　　　left:500px;

　　}

}

上面的例子翻譯成中文：長寬都是 100 的紅色方塊，花兩秒的時間從左邊向右移動500，且反覆發生。

keyframes-selector（關鍵影格選擇器）：百分比

div {

　　width: 100px;

　　height: 100px;

　　background: red;

　　animation:move 2s infinite; 

}

@keyframes move{

　　0%{

　　　　left:0;

　　}

　　50%{ 

　　　　left:200px; 

　　}

　　to{

　　　　left:500px;

　　}

}

縮寫(盡量少用）：

animation 屬性可以分開寫，也可以合併在一起，但是縮寫有以下的固定順序。

transition-name、transition-duration、transition-timing-function、transition-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state

設定多個屬性：

如果要同時設定一個元素裡的多個 animation 屬性，就要用「逗號」隔開。

div {

  width: 100px;

  height: 100px;

  background-color: red;

  animation: color 2s infinite, size 5s;

}

@keyframes color {

  from {

　　background-color: red;

　}

  to {

　　background-color: yellow;

　}

}

@keyframes size {

  from {

　　width: 100px;

　　height: 100px;

　}

  to {

　　width: 500px;

　　height: 500px;

　}

}

4.重點提示

• 是否為轉場動畫，是的話使用 transition 或是 transition 搭配 transform，如果希望載入頁面後直接開始動畫，就用 animation。
• transition 和 transform 需搭配 pseudo 使用。
• 若轉場動畫牽涉到變形，用 transform；沒牽涉到變形，只牽涉到樣式改變，則用 transition。
• 如果希望動畫重複執行，只能用 animation。

5.參考資料