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

2022/01/09閱讀時間約 16 分鐘

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):位移(x>0 向右位移,y>0 向下位移)
  • 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.參考資料

illustration
贊助支持創作者,成為他繼續創作的動力吧!
Allison
Allison
一個對什麼事物都有點好奇卻只有三分鐘熱度的雙子座👋 最近正深陷在網頁設計當中😍 喜歡分享,因為能幫助我產生更多連結與想法!
留言0
查看全部
發表第一個留言支持創作者!
從 Google News 追蹤更多 vocus 的最新精選內容