一、transition（過渡、轉變的意思）

transition 屬性是一個簡寫屬性，用於設定四個過渡屬性：

1. transition-property：設定過渡效果的屬性名稱（預設值是all）；

2. transition-duration：設定過渡完成所需要的時間（預設值是0）；

3. transition-timing-function：設定過渡速度效果曲線（預設值是ease）；

4. transition-delay：設定過渡的開始時間（預設值是0）；

語法：transition: property duration timing-function delay;

注意：這裡transition-duration是需要填的，不填預設為是0，沒有過渡效果。

二、animation（動畫、活力的意思）

animation 屬性也是一個簡寫屬性，用於設定六個動畫屬性：

1. animation-name：設定繫結到選擇器的@keyframem名稱（預設值是none）；

2. animation-duration：設定完成動畫所花費的時間（預設值是0）；

3. animation-timing-function：設定動畫的速度曲線（預設值是ease）；

4. animation-delay：設定動畫延遲幾秒開始（預設值是0）；

5. animation-iteration-count：設定動畫播放的次數（預設值是1）；

6. animation-direction：設定時候輪流反向播放動畫（預設值是normal）；

語法：animation: name duration timing-function delay iteration-count direction;

注意：這裡animation-duration是需要填的，不填預設是0，就不會播放動畫了。

三、區別

1. transition是一個過渡的效果，沒有中間狀態，需要設定觸發事件（如hover等）才能執行；

2. animation是一個動畫的效果，有多箇中間幀，可以在任意一箇中間幀設定狀態，不需要設定觸發事件就能執行。