...

/

Real World Use Cases

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 ...