Day 04 - animation vs transition
今天的主題是稍微來解個惑。什麼疑惑呢?
在前面的文章中,說過:
@keyframes
與animation
負責控制動畫的時間與進度。
但我們在第二天的 CSS 變形基礎中有談到一個 CSS 屬性 transition
,足夠細心你會發現他的語法跟 animation
幾乎完全一致。
所以 transition
跟 animation
到底有什麼差別呢?
transition
vs animation
其實最簡單的差別在於 transition
接受的屬性遠比 animation
少。
從前面文章可以知道 transition
可以調控的只有:
property
duration
timing-function
delay
而 animation
則可以多控制:
iteration-count
direction
play-state
fill-mode
(不懂上面屬性在幹嘛的可以飛回去看看前面的文章)
transition
跟 animation
比起來就像個先天不足的小孩,天生就比它的手足 animation
少了一些功能。
所以說既生瑜何生亮呢?
然而實際情況是,他們根本就不是在同一個賽場上。
先說結論:
transition
適合作為使用者與元素互動的過度效果,而 animation
則適合做網頁中常駐的動畫。
我們拆成幾個項目來看造成他們彼此之間差異的原因。
複雜度與可控性
基於上面提到 transition
天生比 animation
少了一些屬性,這也就意味著 transition
的可控性比 animation
低。
它不能控制動畫的播放次數、方向、播放狀態,也無法如 animation
一樣透過 @keyframes
來細化控制動畫的進度。
觸發方式
transition
是被動的,這意味著它只有在某些事件觸發時才會執行。
比如說 :hover
、focus
、active
等等。
而 animation
的觸發則不需要特定的觸發事件。它可以自動或根據條件開始,並通過 @keyframes
來定義動畫的多個階段。
重複性
因為觸發方式的不同,transition
通常只會執行一次,而 animation
則可以通過 iteration-count
來控制重複次數 。
結語
沒想到吧,今天有結語 ~
誒好今天沒有 code 範例,想看 animation
跟 transition
的範例可以回去看看前面的文章。
但總之,今天開這個主題是想探討 transition
跟 animation
這兩個長得極為相似的 CSS 屬性他們之間的差異。
現在我們至少有一個結論:
transition
適合作為使用者與元素互動的過度效果,animation
適合做網頁中常駐的動畫。