Summary
It would be entirely possible to fill multiple books covering the possibilities of CSS transforms, transitions, and animations. Hopefully, by dipping your toe in the water with this chapter, you’ve been able to pick up the basics and run with them.
In this chapter, we’ve learned what CSS transitions are and how to write them. We got a handle on timing functions such as ease
and linear
, and then used them to create simple but fun effects.
We then learned all about 2D transforms, such as scale
and skew
, and how to use them in tandem with transitions. We also looked briefly at 3D transformations before learning all about the power and relative simplicity of CSS animations. You’d better believe our CSS muscles are growing!
One topic related to animations we didn’t look at in this chapter is @property
, which allows you to define your own CSS custom property, something that can be handy when animating elements. But we will save that for the...