Animations, used to the right extent, can enhance a good experience on your website. Today the best and only universally accepted technology for this is CSS. Follow me and you will learn how to work with loop animations.
To create infinite animations in CSS, we will use the property animation-iteration-count: infinite;.
If you apply this rule to an existing animation, it is done. But for more details, I bring other examples and resources, check out below:
Full example of infinite animation
Below is the complete code for an example of a loading animation. This animation can be applied to images, divs or any other HTML element other than default display: inline element, like texts or links.
<html>
<head>
<style type="text/css">
.loading {
background: #094CFA;
width: 60px;
height: 60px;
margin: auto;
border-radius: 4px;
/* Here we declare our inline animation */
animation: rotate 3s linear infinite;
}
/* Here we define our animation with the name "rotate" */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
</style>
</head>
<body>
<div class="loading"></div>
</body>
</html>
The above script will have the same animation effect shown below. I just added some visual effects. If you want to copy, just click on the CSS tab below:
See the Pen Infinite CSS animation by Ricardo Metring (@metring) on CodePen.
In the CSS loading class, we apply some styles and finally the animation.
To understand what happens, take a look at the animation property and @keyframes rotate.
In animation, we defined the animation in the shorthand method, in only one line, but we could also write it using 4 lines, in the long form:
.loading {
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
For a reference of what each property and value means:
| animation-name | The name of the animation specified in @keyframes |
|---|---|
| animation-duration | The duration of the animation. Can be specified using seconds (s) or milliseconds (ms). We can also use fractionated seconds, e.g. 0.5s |
| animation-timing-function | Defines at which step the animation is executed from start to finish. Acceptable values: linear, ease (default), ease-in, ease-out, ease-in-out, step-start, step-end, steps() |
| animation-iteration-count | Defines how many times the animation is executed. Accepted values: 1 (default), 2, 3 ... infinite |
| animation-delay | Although I didn't specify this property in the example, it's worth mentioning here. It is used to define a time before the animation starts. The value passed is in seconds or ms as well as animation-duration, and in the shorthand form of writing is always considered the value in seconds/ms that comes after the animation-duration time. e.g. animation: rotate 2s 1s; |
I always prefer to use the shorthand way of writing, because it doesn't matter the order in which you define the values of the properties, and it's much less stuff to memorize.
Using keyframes
Keyframes, as the name implies, are frames that we define with specific times from beginning to end of an animation, to represent it.
If you want to animate an object falling to the ground, for example, you need to define the initial position of the object in the air, and the final position, on the ground. That's basically what we did with the example animation in this article.
As we can see above, the duration of the animations is not defined within @keyframes, but we use percentages to generally define the time proportion between one keyframe and another. Alternatively, we can use from and to to define the frames 0% and 100% respectively. See the example below to understand it better:
@keyframes fill {
0% {
width: 0%;
}
50% {
width: 100%;
}
100% {
width: 1%;
}
}
See the Pen Infinite Animation in CSS - @keyframes by Ricardo Metring (@metring) on CodePen.
Compatibility of animation among browsers
I worked with Flash for a long time, and a couple of years ago it was the only thing that existed to support animations on the web. Fortunately, for a few years this scenario has changed and CSS animations are the current standard.
According to the site caniuse.com, over 96.5% of users use browsers fully compatible with CSS animations, and as this number tends to increase more and more. In my opinion, there's nothing to worry about in terms of compatibility.
Using prefixes -moz-animation, -webkit-animation, etc. has also become somewhat archaic. Still according to caniuse, over 94% of users use browsers that no longer require prefixes for animation. I didn't use prefixes in the examples in order not to prolong the text nor to support something that has been losing importance, but this is up to you. For some other CSS properties, however, it is mandatory to use prefixes.
Ricardo Metring
Full stack web developer and co-founder at Criar.io.
I've worked for over 10 years with software development. I'm constantly curious and learning.
