transition和animation的區別是什麼？

一、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是一個動畫的效果，有多個中間幀，可以在任意一個中間幀設置狀態，不需要設置觸發事件就能執行。