動畫 & 變形

幾乎所有答題者都用過動畫 (animation)、漸變 (transition) 與變形 (transform)。其實這並不意外,只要在任何現代網站逛 10 分鐘,就可以知道靜態、無動畫的頁面已經完成使命,徹底終結。

從簡單的游標移入動畫,到更複雜的排版或圖形動畫,只要你下好指令,CSS 應該都可以應付得住。

外圍圓圈的大小代表知道某功能的使用者總數,而內圈代表實際在使用的人數。 將滑鼠移到節點上,就可以看到詳細資料,還有代表此問卷答題者總數的區塊

「全體」這欄顯示每一項技術的整體使用情況(也就是答題者選取了「會再使用」或「不會再使用」), 而接下來的幾欄是依照「資歷年數」分組的使用比例。

比較亮的粉紅色背景,代表該分組比全體平均比例還要高。

資歷年數
全體
<1
1~2
2~5
5~10
10~20
>20
Transitions
90.55%
75.33%
88.61%
93.74%
95.12%
96.15%
94.35%
Transforms
90.06%
74.01%
88.4%
92.98%
95.07%
95.33%
94.59%
Animations
84.76%
63.88%
82.13%
89.15%
91.99%
92.46%
88.94%
與全體使用情況的差距:
-20%-10%0+10%+20%

Transitions

完成答題百分比 98.75% (11176)
完成答題百分比 98.75% (11176)
百分比%數量Σ
已經在用93.72%
知道是什麼,但沒用過4.4%
沒聽過/不確定那是什麼0.64%

CSS Transitions is a module of CSS that defines how to create smooth transitions between values of given CSS properties. It allows to create them but also to define their evolution, using timing functions.

Transforms

完成答題百分比 98.63% (11162)
完成答題百分比 98.63% (11162)
百分比%數量Σ
已經在用93.23%
知道是什麼,但沒用過4.18%
沒聽過/不確定那是什麼1.22%

CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

Animations

完成答題百分比 99.41% (11250)
完成答題百分比 99.41% (11250)
百分比%數量Σ
已經在用89.49%
知道是什麼,但沒用過8.55%
沒聽過/不確定那是什麼1.36%

CSS Animations is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.

Learn CSS Features In-Depth with Estelle Weyl

Take a deep-dive into the essential features of CSS, while also exploring CSS features you probably didn’t even know existed!
感謝贊助我們的合作夥伴! 深入詳情。