Animations & Transforms

Almost all our respondents have used animations, transitions, and transforms. Which should come at no surprise, as just ten minutes browsing any modern website will show you that the era of static, motionless pages is well and truly over.

From simple hover effects to more complex typographical or graphical animations, CSS can probably handle whatever you can throw at it!

The size of the outer circle corresponds to the total number of users who know about a feature, while the inner one represents those who have actually used it.

Hover on each node to view detailed data along with an overlay representing the total number of survey respondents.

The “overall” column shows overall usage for each feature (respondents who selected “have used it”), while the following columns show the usage ratio for each “years of experience” bracket.

A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.

Years of Experience
overall
<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%
Difference from overall usage:
-20%-10%0+10%+20%

Transitions

Completion Percentage: 98.75% (11176)
Completion Percentage: 98.75% (11176)
Percents%CountΣ
Have used it93.72%
Know what it is, but haven't used it4.4%
Never heard of it/Not sure what it is0.64%

CSS Transitions is a module of CSS that lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes.

Transforms

Completion Percentage: 98.63% (11162)
Completion Percentage: 98.63% (11162)
Percents%CountΣ
Have used it93.23%
Know what it is, but haven't used it4.18%
Never heard of it/Not sure what it is1.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

Completion Percentage: 99.41% (11250)
Completion Percentage: 99.41% (11250)
Percents%CountΣ
Have used it89.49%
Know what it is, but haven't used it8.55%
Never heard of it/Not sure what it is1.36%

CSS Animations is a module of CSS that lets you animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes.

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!
Thanks to our partners for supporting us! Learn more.