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

有鑑於用遍不少的前端 UI 框架,對於其 CSS 特效往往是不知其所以然。若要依情況改寫的話,便遇上了不小困難。Udemy 上的 CSS3 Animations, Transforms and Transitions Ultimate Guide 課程有不少的範例和實作簡介,便決定從此來下手。這篇筆記下打字動畫的製作方法。
css3 logo


課程相關資訊

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

本篇範圍:Chapter 10 ( Real Life Animations )

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


概念

1. caret 游標部分,藉由文字 div 寬度的最右側 border 來呈現
2. caret 的閃爍效果,是透過動畫改變顏色狀態。(0%, 100% 為透明;50% 有顏色)
3. 藉由調整 div 的寬度,並搭配 steps(number, position) 來呈現
4. steps 中的 number 是指分為 n 段;而 position 是以「時間」為角度出發,因此 end 是人們感知上的開始 – 在時間一結束時,分段的動作就要執行完畢
5. 文字要加上 white-space:nowrap 來強制不換行
https://github.com/andy922200/css3-animations-transforms-and-transitions-ultimate-guide/commit/09b1080909577dc5b59af06f48b02af240e9652f


系列文章

  • [筆記] 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 (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 (13)
  • [筆記] 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)
  • 按讚加入粉絲團

    延伸閱讀