Themeisle content is free. When you purchase through referral links on our site, we earn a commission. Learn More Show
This is a full syntax guide and interactive CSS animations tutorial for beginners. Use it as reference to learn the different parts of the CSS animations spec. Browser performance has come a long way in the past 10 years. It used to be a lot more challenging to add interactive animations to web pages due to the potential for rendering and performance issues. But nowadays, CSS animations can be used much more freely and the syntax is generally much easier to learn compared to CSS features like grid or flexbox. There are different features that are part of the W3C CSS animation specification. Some easier to use than others. This CSS keyframe animations tutorial will go through all the syntax, including each of the different properties. I’ll include interactive demos to help you grasp what’s possible with CSS animations. The @keyframes syntaxEvery CSS animation has two parts to it: One or more The syntax looks like this:
As shown here, the
In this first example of our CSS animations tutorial, I’ve defined my animation with the name In my example, you’ll notice I used percentages to define each of the keyframes in my animation. If my animation includes keyframes that equal
The following interactive CodePen uses the above syntax in a live example: In the demo, I’ve included a button that resets the animation. I’ll explain later why this is needed. But for now, just know that this animation includes three keyframes that represent steps in this animation sequence: the start, the 50% step, and the end (i.e., 0%, 50%, and 100%). Each of these uses what’s called a keyframe selector along with curly braces to define the properties at that step. Some things to note about the
👉 Now that you have a good understanding of the The animation properties that we’re going to cover:
The animation-name propertyAs mentioned, every CSS animation you create has to have a name that appears in the Using the CSS from the previous demo, the syntax looks like this:
Again,
the custom name that I’ve defined has to also exist as a name for a Some things to keep in mind about
The animation-duration propertyThe
The above would be the equivalent to the following:
You can see the If you use a small number along with Some notes on using
The animation-timing-function propertyThe The declaration looks like this:
This property accepts the following keyword values:
Most of the values are relatively easy to grasp by their names, but you can see how they differ by using the following interactive demo: Use the select input to choose one of the seven keyword values. Note that the The
The keyword values As for Notice the demo lets you set the four arguments in the The
Again, an interactive demo should help you grasp how these jumpterms work: Try selecting an integer along with a jumpterm (or try it with no jumpterm) to see how the different keywords differ with different integer values. Apparently negative integers are permitted but I don’t see any difference between 0 and any negative value. The animation-iteration-count propertyIn some cases, you’ll be happy if an animation runs once, but sometimes you want an animation to run multiple times. The
The initial value for
The above code runs through the animation three and a half times. That is, three full iterations followed by one final iteration that stops exactly halfway through. This property is most useful when used in conjunction with the You can try the demo below which allows you to select a fractional value for the iteration count, so you can see the effect: The animation-direction propertyAs mentioned above in this CSS animations tutorial, the
You can set the value as one of four keywords:
You can try out the different values with different iteration counts using the interactive demo below: The animation-play-state propertyThe This property accepts two values:
By default, any given animation is in the “running” state. But you can use JavaScript to toggle the property’s value. You could even feasibly use an interactive CSS feature like The interactive demo below has an animation running infinitely with two buttons to “pause” and “resume” the animation. The animation-delay propertySome animations are designed to start animating immediately, whereas others could benefit from a slight delay before the first iteration. The
Like other time-based values, you can set the It’s important to note that the delay occurs only on the first iteration, not each iteration. You can try this out using the interactive demo below: The demo gives you the option to change the iteration value as well as the delay, so you can see that the delay doesn’t affect any subsequent iterations – only the first. An interesting way of using this property is with a negative value. For example, using the demo above, try setting the The animation-fill-mode propertyThe final longhand property that I’ll cover in this CSS animations tutorial is one that I used in the
previous demo. You’ll notice that when the animation stops the final iteration, the box remains where it is. This is accomplished using
This property sets how an animation applies styles to the targeted element before and after its execution. That’s a little hard to grasp conceptually, so I’ll cover the meaning of each value; then you can compare the values using the interactive demo. This property accepts the following four keyword values:
The final demo in this CSS animations tutorial will make things a little clearer, but this one might take a lot of playing around before you really get what it does and how it achieves it. For convenience, I’ve added all the demos into a single CodePen Collection. You’ll notice that the demo lets you adjust the fill mode, delay, direction, and number of iterations, as all of these can have an effect on the appearance. I’ve also added a different background color to the animated box in the first keyframe,
which again helps to make the fill mode values a little more clear. If you still don’t quite get how The animation shorthand propertyI’ve covered eight different properties in this CSS animation tutorial for beginners and I encourage you to use the long hand. This will make it easier for you to see the explicit values set. Once you have a good understanding of each of the properties, you have the option to use the
In all honesty, that’s a lot of information in a single line. I would recommend using the shorthand if the declaration doesn’t include all the properties, but maybe only three or four of them. If you do use the shorthand, you can put the values in any order you want, but note the following rules:
Applying multiple animations to a single elementOne final feature it’s good to be aware of is that you have the option to apply multiple animations to a single object by comma-separating the animations. Here’s an example using the shorthand:
Here, I’ve defined two different animations that would map to two different sets of keyframes, but would apply to the same object. That same code could be written in longhand as:
Notice how each property includes two values separated by commas. In this instance, the shorthand would almost definitely be easier to read and maintain. Wrapping up this CSS animations tutorialIf you’re a CSS beginner and this CSS animations tutorial was your first dip into experimenting with moving stuff on web pages, I hope the lesson was comprehensive enough. You might even be able to incorporate CSS variables with animations to make them even more powerful. 👉 One final warning: Use animation in moderation and remember that some web users might be negatively affected by blinking colors and other fast-moving objects. With practice, the syntax and the concepts for building CSS animations will stick with you and you’ll definitely benefit from fiddling around with the code in the different demos. Free guide5 Essential Tips to Speed Up Your WordPress SiteReduce your loading time by even 50-80% |