Real World Use Cases
Apply what we've learned about CSS transitions and their characteristics to some common use cases.
Well orchestrated animations can have a noticeable effect on the overall user experience. Transitions like the ones we covered in the previous lessons can help make an app feel more life-like. Let’s take a look at a couple of use cases, along with their code, to better understand CSS transitions in an app.
Press + to interact
CSS transition characteristics and their usage
Some key characteristics of CSS transitions include:
- They run once.
- They require an external trigger.
- They automatically run in reverse when the trigger is removed.
These characteristics make CSS transitions the perfect method to create simple animations when transitioning between states. These state transitions include pseudo-classes that are triggered by the user, such as :hover
, :active
, and :focus
. We can also use CSS transitions to ...