Web Animation With CSS -Keyframes -
As I mentioned in my previous article, web animation is a key factor for a better experience for visitors/users of a website/web app which eventually leads to more conversion.
In this article I’m covering the basics of another technique of animation built in CSS which is keyframes.
CSS Keyframes
Keyframes and transitions are similar in the matter of what they do, what I mean here is that in both cases you set a duration for the change you want to occur to the html element and then you see it changing over that period of time, yet the main differences between the two is that:
- keyframes don’t require a trigger to start (transitions require one);
- you can repeat the animation n times or an unlimited number of times (not possible with transitions unless using Javascript);
- you have more control of the flow of the animation with a multitude of states over the duration (transitions have only 2 states, a starting and finishing one).
Defining The Animation
To animate something with keyframes we need to “declare” an animation (same as declaring a variable before using it in programming languages), to do that we need to use the keyword @keyframes and set a name for the animation.
Then we have to specify what should happen in each period of the duration of the animation either by using from/to syntax, or using percentages (which I prefer personally), or both at the same time.
@keyframes animationName {
from { transform: translateX(0) }
to {
transform: translateX(100px);
background-color: deepskyblue;
}
}/* Or */@keyframes animationName {
0% { transform: translateX(0) }
50% {
transform: translateX(50px);
background-color: deepskyblue;
}
100% { transform: translateX(100px) }
}/* Or */@keyframes animationName {
from { transform: translateX(0) }
50% {
transform: translateX(50px);
background-color: deepskyblue;
}
to { transform: translateX(100px) }
}
NB: you can use as many percentages as you want to.
That’s enough to create an animation that can be used to animate different elements in a web page.
That done let’s learn how to use it.
animation-name (required)
To use a specific animation we need to set its name as a value for the animation-name property, let’s say we need to animate a div :
div {
animation-name: animationName;
}animation-duration (required)
The period of time that the animation should take to go through the different states.
div {
... /* some styling */
animation-name: animationName;
animation-duration: 2s
}@keyframes animationName { 0% {
transform: scale(1, 1) rotate(0deg);
} 25% {
transform: scale(2, 2) rotate(0deg);
background-color: deepskyblue;
} 50% {
background-color: limegreen;
transform: scale(2, 2) rotate(0deg);
} 75% {
transform: scale(2, 1) rotate(0deg);
} 100% {
background-color: deeppink;
transform: scale(1, 1) rotate(0deg);
}}
NB: the animation occurs only once and starts with the div having the yellow color and stops at the same state that it started in, the example keeps repeating because it’s a gif image.
animation-delay (optional)
A delay that occurs before the animation takes place.
div {
... /* some styling */
animation-name: animationName;
animation-duration: 2s;
animation-delay: 1s;
}@keyframes animationName {
...
}
animation-play-state (optional)
The default value is running, this property sets the animation in a paused or running state.
div {
... /* some styling */
animation-name: animationName;
animation-duration: 1s;
animation-play-state: paused;
}@keyframes animationName {
...
}
animation-timing-function (optional)
Adds effects to the animation so it can be more realistic, like giving a bouncing or elastic effect to the motion of the element.
div {
... /* some styling */
animation-name: animationName;
animation-duration: 2s;
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}@keyframes animationName {
...
}
animation-fill-mode (optional)
By default this property has a value of backwards, which means that the element should have its initial state after the end of the animation, if we want the element to stay in its final state after the animation we can set the value of this property as forwards.
div {
... /* some styling */
animation-name: animationName;
animation-duration: 2s;
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
animation-fill-mode: forwards;
}@keyframes animationName {
...
}
NB: the square should still in the state where it has the pink color.
animation-iteration-count (optional)
You can set how many times the square should animate before stopping, either giving a numeric value or setting the infinite value so it keeps animating infinitely.
div {
... /* some styling */
animation-name: animationName;
animation-duration: 2s;
animation-iteration-count: 3 /* animates 3 times then stops */
}@keyframes animationName {
...
}
Or
div {
... /* some styling */
animation-name: animationName;
animation-duration: 2s;
animation-iteration-count: inifinte /* keeps animating */
}@keyframes animationName {
...
}
animation-direction (optional)
With this property you can decide if you want your animation to start from the initial state to the final, or from the final to the initial one or maybe alternate between the two.
div {
... /* some styling */
animation-name: animationName;
animation-duration: 2s;
animation-iteration-count: inifinte;
animation-direction: alternate
}@keyframes animationName {
...
}
Shorthand Syntax
Finally, a shorthand syntax can be used for a shorter code, it can be used in a different way where you can skip some properties (the optional ones) or change their occurrence (except the animation-duration which always comes first before the animation-delay).
Examples :
.div1 {
animation: animationName 2s infinite;
}.div2 {
animation: animationName 2s 1s ease-in-out;
}.div3 {
animation: animationName 2s ease-in-out forwards;
}.div4 {
animation: animationName 2s forwards infinite ease-out;
}@keyframes animationName {
...
}
This is should be enough for this basic CSS keyframes guide, I hope you learned something useful from it, and see you next time, have a nice day !
