Welcome back, we are still on the run with comprehensive CSS basics tutorial and summary for absolute beginners.

If you have not checked our previous summaries you can please to do and come back here so that we can continue together.

Without much further ado ladies and gentlemen, boys and girls, lets frog-match into it.

1. Animation-name

When dealing with animations in CSS, the first property you will come across is the animation name. As the name suggest it is the name of the animation you are try to refer to. Let take a look at the example.

.box {
animation-name: pulse-animation // you can put any any name you want 
//,,it doesn't matter what the hell it is.
}

@keyframes pulse-animation {
0% {
opacity:0
}
100% {
opacity:1
}
}

2. Animation-Duration

Animation duration is what it is. As you might have realized this property particularly sets the time it takes the animation take place. Allow me sip a coffee and i will write yo an example. Alright, this is it.

.box {
animation-duration:2s
}

3. Animation-Iteration count

This property sets the number of times it take the animation to run. it could be a number or infinite

animation-iteration-count:infinite

4. Animation-Delay

This sets the time it will take before an animation starts

.box {

animation-delay:2s
}

5. Animation-Direction

This sets the direction an animation will take. It can be either reverse or alternate.

animation-direction:reverse

8. Animation-fill-mode

Sometimes you want to instruct the browser to make the element stay at a point where the animation stops. Animation-fill-mode property helps you achieve that.

.box {
animation-fill-mode :forwards
animation-name :changePosition 
}

@keyframes changePosition {
0% {
top:10px
}

100% {
top:100px;
}


}

Are we together class? I know you have gotten it yet. Let me explain a bit further. Well from the example above, you can see we are trying to animate the top position. On a normal animation, the element will animate to 100px and go back to 10px. However, of we want to make it stay at 100px, then we add animation-fill-mode:forwards. That is it. Nothing less or more for that matter.

CONCLUSION

That is it for today, We are working on preparing a video for this series. Should you be interested, Please let me know in the comments section. Thanks.