Angular Animation
Angular Animation is one of humanity’s life-long dreams (if some historians are to be believed). The theory begins with cave paintings: In some cave paintings, it’s common to see creatures drawn with far too many limbs.
There are a couple of theories behind this. Some suggest that this was simply because the artists had no means of erasing the limbs, leaving their mistakes on the walls for posterity. Others believe that these were the earliest attempts to capture the idea of motion in a static image. I choose to believe the second theory.
And what’s more natural than the desire to capture motion? Everything in nature moves. People walking, water running, plants unfolding, the only thing that is truly constant in nature is change, in the form of motion. Some of it happens in a blur, and some of it’s too slow to perceive, but it’s always happening.
Angular Animation is change, and motion. It’s the closest we get to capturing life in our art. This would be why people are always saying things like “Angular Animation makes our websites (or presentations, or whatever) come alive.” It might be overused, but it’s a phrase that elegantly captures the purpose of Angular Animation in web design.
That illusion of motion, when applied correctly, is what tells the users that they have actually done something. They have successfully interacted with the interface, and have caused something to change.
This triggers the same feelings (or at least very similar feelings) in them as the ones they experience when they interact with physical objects. In a way, Angular Animation is skeuomorphic. That’s right, I said the “s” word.
When used right, Angular Animation is designed to mimic real-world interactions. In a way, we’ve come full-circle. We might not be using far too many leather textures anymore, but we’re still trying to imitate the real world.
Motion is an important aspect in the design of modern web applications. Good user interfaces transition smoothly between states with engaging animations that call attention where it’s needed. Well-designed animations can make a UI not only more fun but also easier to use.
Overview
Angular’s animation system lets you build animations that run with the same kind of native performance found in pure CSS animations. You can also tightly integrate your animation logic with the rest of your application code, for ease of control.
Angular animations are built on top of the standard Web Animations API and run natively on browsers that support it.
For other browsers, a polyfill is required. Uncomment the web-animations-js polyfill from the polyfills.ts file.
IT Professionals, Web Developers, web programmers, IT students can use the below links to be updated on Angular 4
Back to Angular 4 Tutorial Main Page 
