Introduction
Today I will tell you how to make animation. We will see all the necessary animation property in this post. You can get the code on my github. So Let's Get Started!!
Animation
Animation are the property use to enhance the look of the website. It give a nice user interference and also use to show people the goal of the website.
A Basic Animation
First Animation: Changing the color of a square
<div id="square">Square</div>
Here I make a square of blue color and then give it some styles. You can take any color!
#square{
position: relative;
width: 8rem;
height: 8rem;
background-color: rgb(14, 202, 202);
border-radius: 5px;
margin: 3rem 0 0 3rem;
text-align: center;
}
Now we will make a animation.
Step 1: Make animation @keyframes
To make a animation You need to set @keyframes
. It hold what styles you want to give to your element at a certain time and then you need to give it a name. I my case I am changing the color of square. So, I give it a name color
. Now, You can write @keyframes
in two type like
@keyframes color{
from{
background-color: rgb(14, 202, 202);
}
to{
background-color: pink;
}
}
If you want to perform a animation which has two steps you can use to
and from
. Or you can do it by using percentage value like
@keyframes color{
0%{
background-color: rgb(14, 202, 202);
}
100%{
background-color: pink;
}
}
Percentage values are use when you have to do multiple task in the animation but you can use both! I usually use percentage value for an animation
Step 2: Set animation
property on the square.
Now, we will animation property on the square. You need to know about the properties of animation for that. I will tell you those which are mostly use:
animation-name
- It is use to tell the browser which@keyframes
you want to use. In my case, my@keyframes
name iscolor
.animation-duration
- It is use to tell in how much time the animation should be finished.animation-iteration-count
- It is use to tell how many time it should execute.
You can learn more about animation on w3school or on any another website. Now, we will use the animation property but we will write it in a single line like this:
animation: color 4s infinite;
There are 7 property in animation
in Css. For using the animation
property in single line, I first write animation-name
that is color
, then animation-duration
which is 4s in my case and then set animation-iteration-count
to infinite
. If you want to use the animation only one time, you can set it to 1 . You can also set the values of animation property by your self.
Now, if you see your square, it will change its color again and again! Now, we will make the square it move while changing the color.
Second Animation: Moving the square while changing the color!
For that I will use the same square and I will make an another @keyframes
for that. We will use the same steps like before
Step 1: Make animation @keyframes
@keyframes move{
0%{
left:0px;
background-color: rgb(14, 202, 202);
}50%{
left: 300px;
background-color: pink;
}100%{
left:0px;
background-color: rgb(14, 202, 202);
}
}
Here, I make a @keyframes
with the name move
and I use three steps for this animation. First I set the left
to 0px and a background-color
. Then at 50% I set left
to 300px and change the background-color
and at last, I again set left
to 0px, so that it will come on the first position.
Step 2: Set animation property on the square
animation: move 4s infinite;
Here, I set the animation-name
to move
, then animation-duration
to 4s and animation-iteration-count
to infinite
. Again you can set the animation value according to your choice. And also don't forget to comment the first animation
property or things can go wrong!
Conclusion
As the post is already too long so we will continue it on another post. For now, it is enough for today. I hope you understand it. I try my best to tell all the things about animation. And also tell me in the comments on what topic I should write my next post. Thankyou for reading!
Top comments (2)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.