Animated Style Transitions

When creating a UI, providing smooth animated transitions for its components is one of the keys to achieve a good user experience for interactions with the application.

There are two ways of implementing animated transitions in web components’ CSS:

  • Using the transition property for more simple cases, when you need to smoothly change a component style value over a given duration.

  • Using the @keyframes rule with the animation property for advanced animations, when you need to define changes in a style value at each specified moment of time during the animation.

The first method is the most commonly used, as the transition property provides all the functionality to cover 90% of use cases. Get more information about using it in the Using Transitions Property article.

The second one provides almost unlimited possibilities in animation style transitions without using a line of JavaScript, but requires some animator thinking and is much more complex to implement and handle. Read about using it in the Using Keyframes Rule article.

Was this page helpful?