Search⌘ K
AI Features

Tips And Tricks

Explore practical tips and tricks to improve CSS transitions in Angular. Learn how to use the will-change property for hardware acceleration and optimize animations by considering user preferences for reduced motion.

Hardware acceleration

There are sometimes subtle glitches that happen when running certain types of animations. A glitch usually presents itself as a slight shift in the position of elements within an animation. This happens because of the difference in how CPU and GPU render things.

A solution to this problem is using the will-change property when creating our CSS transitions. This property tells the browser which of the element’s properties will be animated, which in turn ...