If you’ve made it this far, you now know pretty much all you need to know about CSS animations. Pat yourself on the back 🙌
This final part won’t be long but I didn’t want to cram it in with the other stuff. In this part we take a look at a couple of bonus topics 👍 It’s a bit of a mix but some things to consider and be knowledgeable of.
CSS variables are awesome. But you can’t animate them just yet. So can we do with them? We can use their values to create dynamic animations.
Consider an example where we have three squares. We want to animate them all growing to different scales. Do we need three different animations for this? We could use animation-fill-mode backwards and scale them all from the same start size? But do we know their start size? With CSS variables we can make the animation dynamic.
How about the following code
Unfortunately, I’ve not seen a way for the animation to take any notice of CSS variables changing value at run time 👎 😭 Maybe in the future.
But not all is lost, we can just flip the animation on it’s head 🤕 Consider this example where we update an elements scale to effect the animation.
So we can animate an element from point to point but how do we add curve to our animation path?
Let’s start with a simple example where we want an element to travel from one point to another but get some air time.
Looks good. But won’t work. We will get something like this
So how do we combat that? We need two animations and two elements. The wrapper element will handle the X axis. The actual element will handle the Y axis.
And here’s a little loader you could put together with this technique 🐛
So what if we need to know when an animation has ended in our scripts? Don’t worry. There are some events for you to hook into.
animationiteration- triggered after each animation iteration
animationend- triggered after an animation completes
animationstart- triggered at the start of an animation
These hooks are pretty powerful and allow us to do some pretty cool things. Consider an infinitely spinning element. Using
animationiteration we can keep a track of how many times the element has span for example.
There are many possibilities when you start hooking into the animation events. You could also make an animation infinite but with random delays.
If you’ve got this far, you pretty much know everything there is to know about CSS animation 🙌
It might seem like an odd topic to end on but do you even need CSS animation? 😕
Hear me out. CSS animation is great. But once your animations start becoming complex, things get harder to maintain. Especially if you’re not using a CSS preprocessor like SASS.