[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 (偽類)使用：

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-property、transition-duration、transition-timing-function、transition-delay

transition: box-shadow 1s linear 1s

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。

設定多個屬性：

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

div:hover {
　　width: 300px;
　　height: 500px;
}

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

div {
　　width: 100px;
　　height: 100px;
　　background: red;
　　transition: width 2s, height 4s; 
}

div:hover {
　　width: 300px;
　　height: 500px;
}

div { 
　　width: 100px; 
　　height: 100px; 
　　background: red;  
}  
div:hover { 
　　transition: width 2s, height 4s;
　　width: 300px; 
　　height: 500px; 
}

不同的雙向 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)：傾斜

設定多個樣式：

div {
　　width: 100px;
　　height: 100px;
　　background: red;
}

div:hover {
　　transform:translate(50px,50px) rotate(90deg);
}

搭配 pseudo class (偽類)使用：

div {
　　width: 100px;
　　height: 100px;
　　background: red;
}

div:hover {
　　transform:translate(50px,50px) rotate(90deg);
}

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

div {  
　　width: 100px;  
　　height: 100px;  
　　background: red; 
　　transform:translate(50px,50px) rotate(90deg);
}  

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

搭配 transition 的轉場效果：

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 使用：

＠keyframes animation-name{ /*animation-name 動畫名稱*/
　　keyframes-selector{ /*關鍵影格選擇器，可以是from-to，也可以是百分比*/
　　　　css-styles; /*CSS樣式*/
　　}
}

div {
　　width: 100px;
　　height: 100px;
　　background: red;
　　animation:move 2s infinite; 
}
@keyframes move{
　　from{
　　　　left:0;
　　}
　　to{
　　　　left:500px;
　　}
}

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

div {
　　width: 100px;
　　height: 100px;
　　background: red;
　　animation:move 2s infinite; 
}

@keyframes move{
　　0%{
　　　　left:0;
　　}
　　50%{ 
　　　　left:200px; 
　　}
　　to{
　　　　left:500px;
　　}
}

縮寫(盡量少用）：

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

設定多個屬性：

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.參考資料