An animation is nothing more than a change produced over a series of frames. By making these changes progressively, a sense of movement is produced. With keyframes we have the ability to control from start to finish, how we want these changes to affect our frames.
An animation is registered through the
@keyframes rule and executed through the
That’s how simple the keyframes assignment is. We assign an identifying name and inside the curly brackets we indicate a beginning (
from) and an end (
to) of our animation.
We can also assign percentage values (even multiple values), which allows us to control more precisely the progress of our animation.
To associate the registered animation to an element we use the property
The previous animation will last 3 seconds and will repeat indefinitely. We can also specify each of the properties separately:
animation and its properties can be found in the CSS3 specification.
animation we also have the
steps() function, which will allow us to specify in how many steps our animation will be executed:
In the previous example our animation will last 10 seconds and will have 10 steps or frames, so it will run one step every second and possibly our animation will no longer be as smooth.
With this we get that our animation starts with a transparent object and that, progressively, ends up being opaque. And back to the beginning.
The percentage of progress can also be specified cross multiple steps, either by encompassing the steps with repeated properties or separately:
Using this technique we can achieve effects such as bouncing, where an animation changes its rhythm as it progresses.