Angular Animations: Keyframe animations

Published: 23 February 2024
on channel: Brian Treese
1,741
31

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!

------------------------------------------------------------------------------

👕 Be the coolest developer in the room with these Angular tees! (https://www.teepublic.com/user/dev-drip)

------------------------------------------------------------------------------

📺 More Angular Animation Tutorial Videos:    • Angular Animations  

------------------------------------------------------------------------------

🔗 Demo Link:
https://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 #angulartutorial #animation


On this page of the site you can watch the video online Angular Animations: Keyframe animations with a duration of hours minute second in good quality, which was uploaded by the user Brian Treese 23 February 2024, share the link with friends and acquaintances, this video has already been watched 1,741 times on youtube and it was liked by 31 viewers. Enjoy your viewing!