Angular Animations Tutorial: The Keyframes Function

As you probably already know, when you build apps today, you’ll likely need to use animations and transitions to enhance the UI where possible. With Angular’s animation framework we have access to some pretty powerful features which allow us to do things that may not be possible with CSS alone. In this video we’re going to look at a little fun and crazy example using the Angular keyframes() animation function. Alright, let’s get to it!
------------------------------------------------------------------------------
📺 More Angular Animation Tutorial Videos:
1.) Learn the Basics ( • Angular Animations Tut... )
2.) Enter & Leave Animations ( • Angular Animations Tut... )
3.) Query and Stagger Functions ( • Angular Animations Tut... )
4.) Start and Done Events ( • Angular Animations Tut... )
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)!
------------------------------------------------------------------------------
🔗 Demo Link:
stackblitz.com/edit/stackblit...
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
1:14 - The demo application
1:55 - How the Angular Animation keyframes function works
2:22 - Converting an existing basic open transition to a more complex keyframe animation
3:12 - Adding steps to the keyframes function with the animations style function
5:25 - Altering the timing of the keyframes with the offset property
7:07 - Adding the close keyframe animation in reverse order of the open animation
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #animation #keyframeanimation

[@user-cm2vl7of5o]

This is fantastic; thank you. What about a more realistic example? Something like a button that, when pressed, rotates and gets transformed into a thumbs-up icon.

[@ovuokeaghwotu2389]

Well done on keeping the quality of your videos consistent! I referenced one of your blog articles on Angular CDK in a stack overflow answer.

[@briantreese]

Thank you for the feedback, that's really cool!