[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (13)

有鑑於用遍不少的前端 UI 框架，對於其 CSS 特效往往是不知其所以然。若要依情況改寫的話，便遇上了不小困難。Udemy 上的 CSS3 Animations, Transforms and Transitions Ultimate Guide 課程有不少的範例和實作簡介，便決定從此來下手。這邊筆記下 transition timing function 中的 step 效果。

---

課程相關資訊

[連結]：https://www.udemy.com/course/css3-animations-transforms-and-transitions-ultimate-guide/

本篇範圍：Chapter 4 ( Transitions )

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。

---

內容

1. transition-timing-function: steps() 提供了另外一種移動方式，呈現上會是一步步跳躍式的前進
2. steps() 內容可以放兩個參數，搭配上 duration 後，意思就是：在 x 秒內走 y 步
3. steps() 的第一個參數為 x 步；第二個參數為表現方式調整： start 為先動作後停止；end 為先停止後動作

程式碼

https://github.com/andy922200/css3-animations-transforms-and-transitions-ultimate-guide/commit/ba88d24993635a57f1c2afdf39fee555431c740e

---

系列文章

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (9)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (8)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (72)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (71)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (70)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (7)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (69)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (68)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (67)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (66)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (65)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (64)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (63)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (62)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (61)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (60)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (6)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (59)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (58)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (57)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (56)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (55)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (54)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (53)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (52)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (51)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (50)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (5)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (49)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (48)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (47)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (46)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (45)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (44)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (43)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (42)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (41)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (40)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (4)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (39)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (38)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (37)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (36)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (35)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (34)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (33)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (32)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (31)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (30)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (3)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (29)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (28)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (27)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (26)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (25)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (24)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (23)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (22)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (21)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (20)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (2)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (19)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (18)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (17)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (16)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (15)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (14)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (12)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (11)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (10)

[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (1)

按讚加入粉絲團

延伸閱讀

• [筆記] NotebookLM 錦囊妙計：掌握九大應用場景的創意用法 – 4
• [筆記] NotebookLM 錦囊妙計：掌握九大應用場景的創意用法 – 2
• [筆記] vite-plugin-top-level-await 在 Vite 8 可不必使用
• [筆記] NotebookLM 錦囊妙計：掌握九大應用場景的創意用法 – 1
• [筆記] Claude Code 代理人開發全攻略 – 14