Angular Animations: Keyframe Animations

Brian Treese
8 min readFeb 23, 2024

--

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!

Before we get too far along, it’s important to note here that I’ve already created a couple of posts focused on the animation framework. First, I’ve got an animation basics post where I cover how to include the animations module and then how to use some of the basic functions of the API to create a simple state-based animation.

Then I’ve got a post where we build off the example in the first postand change to animate items as they are added to and removed from the DOM with the :enter and :leave aliases. So, if you're not familiar with these concepts, the examples in this post might not make as much sense as they would if you were to watch them first.

--

--