CSS transition和animation的區別

本文章講解內容是 transition 與 animition 動畫效果的不同點與相同點, 雖然它們都可以實現CSS動畫效果
結合 “css 動畫實現的 3 種方式” 來理解; 因為這篇文章就是繼這篇文章的延續。
廢話不多說, 直接上代碼以及圖例 (為了讓大家方便閱讀, 都有自己驗證過程的一些圖片作為分享) 。
一：transition和animation的區別:

1. Transition 強調過渡; Animation 強調流程與控制 。
2. 兩者的控制粒度不一樣
 1. 某種程度上, transition 更加粗一點, 比如過渡的速度進行了封裝, 可以控制是勻速改變還是貝塞爾曲線之類的。
 2. animation 提供的 keyframe 方法, 可以讓你手動去指定每個階段的屬性; 此外 animation 還封裝了循環次數, 動畫延遲等功能, 更加自由和強大。




3. 動畫狀態:
 1. CSS的 transition 只有兩個狀態:開始狀態 和 結束狀態 。
 2. animation 可能是多個狀態, 有幀的概念 。
4. 動畫觸發方式:
 1. CSS的transition需要借助別的方式來觸發, 比如CSS的狀態選擇器（如:hover）或 借助JavaScript來觸發 。
 2. animation 不但可以使用上面的方式觸發, 更重要的是可以自動觸發 。
5. animation 控制動效上要比 transition 強，因為它具備一些控制動效的屬性，比如“播放次數”、“播放方向”、“播放狀態”等。
6. 動畫實現的範圍:
 1. transition 是有一定限制的, 並不是所有 CSS 的屬性都具有過渡效果 。
 2. 另外相比而言, CSS 的 animation 要比 transition 強大的多, 幾乎所有的 css 屬性都可以實現動畫效果。
 3. 這也是為什麼使用 animation 制作 Web 動畫的場景更多 。
7. 動畫實現方式
 1. CSS 的 animation 是離不開 @keyframes 的，換句話說，我們需要先使用 @keyframes 來注冊一個動畫效果，即幀來描述動畫效果。當然，只注冊也不見得有效果，還是需要使用 animation-name 屬性引用 @keyframes 注冊好的動畫效果。
"注意": CSS transform 也是用來制作動效的，這個說法有點偏頗，CSS transform 只不過提供了一些函數，可以做不同的變換，這些函數運用於 CSS 的 transition 或 @keyframes 中能得到一些不同的效果，特別是配上時間，緩動函數之類的，效果會更佳。因此也被識認為是動效中不可或缺。其實在 animation 中，可以發揮你的想象，使用 CSS 中任意屬性，實現一些有創意的動效。

二：transition和animation的共同點:

1. 從整體來看，animation 和 transition 想做的事情都是一樣, 通過控制屬性變化的過程也, 實現動畫; 都是立足於控制本身 dom 的 css 屬性變化過程, 來實現動畫的視覺效果。而你看 transform 就不同, 本身一個 css 屬性 。
2. 他們都有“持續時間”、“延遲時間” 和“時間緩動函數”等概念，這些都是用來控制動效的效果。

三：推薦 CSS 動畫網站:

1. https://animate.style/
3. https://www.animejs.cn/

之前有整理過一部分知識點, 一直沒有發布, 因為都是有關 前端 方面的零散內容; 現在想想無論分享什麼內容都需要慢慢積累, 所以還是決定將之前整理的相關內容驗證之後慢慢分享給大家 這個專題就是 "前端CSS " 相關的內容; 不積跬步，無以至千裏, 戒焦戒躁 。
如果對你有所幫助，喜歡的可以點個關注或者給個贊；整理知識點不易, 每次都是在工作繁忙之餘夜深人靜之時整理, 每次整理時都在思考如何讓大家更容易理解, 更容易找到、看到自己想看到的內容; 無論知識點是大是小, 我都會驗證後再分享, 以防自己發表的文章給大家造成誤導。如有問題還望不吝賜教，本人會及時更改 (本文原創, 如需轉載，請注明出處) 。