Animation in CSS
Mohanad Alrwaihy
October 19, 2021
11
1
The CSS Animation lets us change as many CSS properties as we want many times from one style to another.
5 min read
What is CSS?
The Cascading Style Sheets also known as (CSS) is a powerful programming language to describe how a document written in languages like HTML is presented on the screen. CSS is a great tool for adding style to Web documents and one of the important concepts of it is the CSS is Animation.
What is CSS Animation?
CSS Animation lets us change as many CSS properties as we want many times from one style to another.
CSS can allow the animation of HTML elements without using JavaScript or Flash!
Here is a list of the properties of CSS Animation:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
How to create CSS Animation:
The @keyframes will hold the style of an element at certain times in other words it determines the different states or styles of the element. It will have a name that will be used on the animation-name
Having just two states we can define the initial and final states using "from" and "to" or using percentages to have more than two states.
An example of how we can use CSS Animations to move a box from left to right and change the color from blue to red with a duration of 5 seconds.
Example 1:
CSS.box-animation {
width: 100px;
height: 100px;
background-color: blue;
margin: 5% 0;
animation-name: example1;
animation-duration: 5s;
}
@keyframes example1 {
from {
background-color: blue;
margin: 5% 0;
}
to {
background-color: red;
margin: 5% 100%;
}
}
animation-name:determine the animation to perform for this example it is example1animation-duration:determines how long an animation should take to complete.
CSS Animations - Example 1
The problem with the previous example is that the animation will only run once and after that, the animated element will return to the state before the animation.
To change this we can use the animation-iteration-count for how many times to repeat the animation.
An example of how to make the box move 2 seconds later using the animation-delay and to make the movement repeat 5 times.
Example 2:
CSS.box-animation {
width: 100px;
height: 100px;
background-color: blue;
margin: 5% 0;
animation-name: example2;
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: 5;
}
@keyframes example2 {
from {
background-color: blue;
margin: 5% 0;
}
to {
background-color: red;
margin: 5% 100%;
}
}animation-delay:Specify a delay before starting the animation.animation-iteration-count:Specify the number of times the animation should run.
CSS Animation - Example 2
To change the direction of the box, we could use the animation-direction property which specifies if the box will move to the right or the left or alternate between left and right every iteration.
Example of how to use the animation-direction to move the box from left to right or reverse or to alternate between the directions.
Example 3:
CSS.box-animation1 , .box-animation2, .box-animation3, .box-animation4{
width: 100px;
height: 100px;
background-color: blue;
margin: 5% 0;
}
.box-animation1 {
animation-name: example3;
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: 5;
animation-direction: normal;
}
.box-animation2 {
animation-name: example3;
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: 5;
animation-direction: reverse;
}
.box-animation3 {
animation-name: example3;
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: 5;
animation-direction: alternate;
}
.box-animation4 {
animation-name: example3;
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: 5;
animation-direction: alternate-reverse;
}
@keyframes example3 {
from {
background-color: blue;
margin: 5% 0;
}
to {
background-color: red;
margin: 5% 100%;
}
}animation-direction:Specify whether the animation plays forward, backward, or in alternate cycles.
The animation-direction can have one of these values:
normal:The default animation (forward).reverse:Animation will run on the opposite side (backward)alternate:Animation will run forward for the first time and backward the second time and keep alternating.alternate-reverse:Same as the alternate Animation characteristic but this will start going backward.
CSS Animation - Example 3
Now let's change the animation speed and we can do this by using the animation-timing-function this property have these values to be used to change the animation curve speed:
ease:Specifies an animation with a slow start, then fast, then end slowly (this is the default)linear:Specifies an animation with the same speed from start to endease-in:Specifies an animation with a slow startease-out:Specifies an animation with a slow endease-in-out:Specifies an animation with a slow start and endcubic-bezier(n,n,n,n):Lets you define your own values in a cubic-bezier function
In this example, we will use the ease, linear, ease-in, ease-out to see the difference in speed between them.
Example 4:
CSS.box-animation1 , .box-animation2, .box-animation3, .box-animation4{
width: 100px;
height: 100px;
background-color: blue;
margin: 5% 0;
}
.box-animation1 {
animation-name: example4;
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: 5;
animation-timing-function: ease;
}
.box-animation2 {
animation-name: example4;
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: 5;
animation-timing-function: linear;
}
.box-animation3 {
animation-name: example4;
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: 5;
animation-timing-function: ease-in;
}
.box-animation4 {
animation-name: example4;
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: 5;
animation-timing-function: ease-out;
}
@keyframes example4 {
from {
background-color: blue;
margin: 5% 0;
}
to {
background-color: red;
margin: 5% 100%;
}
}animation-timing-function:Specify the speed curve of the animation.
CSS Animation - Example 4
The last animation property we want to test is the animation-fill-mode which specifies the style for the target element when the animation is not playing.
The next example will be using the animation-fill-mode and using different values to see what is the difference it is making after the animation ended.
Example 5:
CSS.box-animation1 , .box-animation2, .box-animation3, .box-animation4{
width: 100px;
height: 100px;
background-color: blue;
margin: 5% 0;
}
.box-animation1 {
animation-name: example5;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: none;
}
.box-animation2 {
animation-name: example5;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.box-animation3 {
animation-name: example5;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
.box-animation4 {
animation-name: example5;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes example5 {
from {
background-color: blue;
margin: 5% 0;
}
to {
background-color: red;
margin: 5% 90%;
}
}animation-fill-mode: Specify a style for the target element when the animation is not playing:
none:The animation will not apply any styles to the element before or after it is executed.forwards:The element will retain the style values that are set by the last keyframebackwards:The element will retain the style values that are set by the first keyframeboth:The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions