1.transition
功能：
- 改變目標元素的樣式時，像是顏色、外觀、大小等等
- 需要搭配 pseudo class (偽類)使用
- 一定要有 transition-property 和 transition-duration
屬性：
- transition-property: 轉場動畫的樣式
- transition-duration: 轉場所需要的時間
- transition-timing-function: 轉場的時間曲線
- transition-delay: 要延遲多久轉場
常用的 transition-timing-function 屬性值：
- linear（等速）
- ease（預設值，緩入、中間快、緩出）
- ease-in（緩入）
- ease-out（緩出）
- 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 屬性值：
- normal（預設值、正向播放）
- reverse（逆向播放）
- alternate （一次正向、一次逆向播放，如果播放次數設定為偶數，最後一次會是逆向播放，如果播放次數設定為奇數，最後一次會是正向播放）
- 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。
