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


Watch video Angular Animations: Keyframe animations online without registration, duration hours minute second in high quality. This video was added by user Brian Treese 23 February 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,74 once and liked it 3 people.