What are CSS Keyframes?
Keyframes in CSS give us a way to define how our animations behave. They are used along with the animations properties to describe what our elements will do, and help us to really fine tune them. And the best part is they’re easy to use!
If you’ve used the transition property in CSS, you may have wished you could tweak the animations a little more. Keyframes allow you to easily define individual points of action for an animation. This means instead of just describing the overall action you want to take place, you can describe different parts of that action, and change behavior from one action to the next.
In its most basic form, you can just define a keyframe as a simple translate from one spot to another. Here, I’ve named this keyframe “move”, but you can name it whatever is appropriate for your situation. The “from” is just setting where our animation will start, “to” is telling us where it will end. Here the element starts at its original location, and moves 120px on the X axis, or to the right.
But for more control, you can specify the percentage of the animation’s lifecycle you want the action to occur at, and the different properties you want to change. For instance, if you wanted to make a ghost bat, swinging from beyond the grave, the keyframe might look something like this:
The element changes at the percentages we specify. The element we apply this keyframe to will gain the opacity we want, and rotate exactly how much we want, precisely when we want. Now we just have to apply the keyframes to our elements, and animate them. For our swinging bat, this could look like this
In this example, transform origin is just moving the anchor point for rotation, so our bat swings from its end and not its center. Our animation properties are what move our element.
Here we attach our “swing” keyframe to our element with animation-name. With timing-function, we can specify whether the animation changes speeds across its lifecycle. We set the duration of the animation, and the delay before it starts. With direction we can specify whether the animation runs in the normal direction from 0%-100% (from-to), or in reverse, or we can even have it alternate between normal and reverse. Iteration-count declares how many times the animation will run. Fill mode will let you keep an element at its starting and/or ending position, before or after the animation has run. This last one is very important, as once an animation is done, the element would otherwise default back to its original position
We can even use shorthand to make our animation properties much cleaner. With the animation property, you can specify all these properties in one place.
Much better. And our reusability is looking great as well. We can apply the keyframes to multiple elements, and then change each individual elements’ behavior with the animation properties assigned to them.
Keyframes can be a very handy tool for animation, and are a lot of fun to mess around with. I highly recommend spending some time building them and exploring all the different animation options.
