Angular Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and easier to use, but they aren’t just cosmetic. Animations can improve your app and user experience in several ways:
- Without animations, web page transitions can seem abrupt and jarring.
- Motion greatly enhances the user experience, so animations give users a chance to detect the application’s response to their actions.
- Good animations intuitively call the user’s attention to where it is needed.
Typically, animations involve multiple style transformations over time. An HTML element can move, change color, grow or shrink, fade, or slide off the page. These changes can occur simultaneously or sequentially. You can control the timing of each transformation.
Angular’s animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable. This includes positions, sizes, transforms, colors, borders, and more. The W3C maintains a list of animatable properties on its CSS Transitions page.
#angular #css #html #angular 9
