CSS ANIMATION
CSS animation property allow us to creatin animation effect for change in element's style.
Lets first see an example and then further understand its key features.
@keyframes my-animation{
from { margin-left: 0;}
to { margin-left: 90%;
background-color: yellowgreen;
}
}
.box{
animation-name: my-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
height: 50px;
width: 100px;
background-color: #006699;
}
▶ Run the code
Output:
Building blocks of CSS animation
There are two building blocks of CSS animation:
- @keyframes - It creates the platform for animation.
- keyframes animation properties - Inside keyframes animation properties are specified. The animation properties are defined either in terms of to and from or in percentage form.
@keyframes animation-name{
.
.
.
}
@keyframes animation-name{
from { property1: value1;}
to { property2: value2;}
}
@keyframes animation-name{
0% { property1: value1;}
50% { property2: value2;}
100% { property2: value3;}
}
Steps to create animation
Step 1:- Create @keyframes inside style tag.
Step 2:- Name @keyframes to be used further. Example: @ketframes My_animation { ... }
Step 3: - Define CSS configuration inside keyframes for animation.
Step 4: - Mention animation-name with desired element you want animation
for.
Example: div{ animation-name: My_animation;} .
Note: You must mention animation-duration property otherwise animation will not take place because a default value 0 is set to the animation-duration.
@keyframes my-animation{
0% { margin-left: 0; background-color: #006699;}
50% { margin-left: 90%; background-color: yellowgreen; border-radius: 50%;}
100% { margin-left: 0; background-color: #006699;}
}
.box{
animation-name: my-animation;
animation-duration: 4s;
animation-iteration-count: infinite;
height: 50px;
width: 100px;
background-color: #006699;
}
▶ Run the code
Output:
CSS animation delay
The animation-delay property specifies the delay time for animation to start.
@keyframes my-animation{
0% { margin-left: 0; background-color: #006699;}
50% { margin-left: 90%; background-color: yellowgreen; border-radius: 50%;}
100% { margin-left: 0; background-color: #006699;}
}
.box{
animation-name: my-animation;
animation-delay: 2s;
animation-duration: 4s;
animation-iteration-count: infinite;
height: 50px;
width: 100px;
background-color: #006699;
}
▶ Run the code