How to Set Animation Delay in Font Awesome Class. Stay Updated with our FaceBook page: / learnmaniac1987
======================================================
In this tutorial, we are going to understand how to set time delay to the animation observed in font-awesome fa-spin class that makes rotating your icons. In generally, they come as rotating for infinite times by default. Now, the question is what we want? We want that on page loading, the icon in the extreme left will rotate first for two times, then it will stop rotating. Then comes the second icon in the web page which will execute rotation, and will stop after rotating twice. Then comes the third icon in action to do the same.
In doing so, we need to change the css3 animation property to execute this serial-wise animation, and that is the main purpose of this tutorial; to introduce you with a common css trick. It is a very minor trick, a trick to the basics, still these small tricks often come in handy. Hope you will like it.
The thing that you need to keep in mind always to change the class names accordingly while you are making a copy / paste action. Carefully change each of them whenever necessary.
If you have liked this tutorial, then do not hesitate to hit that Red SUBSCRIBE button.Do not hesitate to Like, make comments and share us. Thanks in advance for watching.
======================================================
Font awesome download link:
http://fontawesome.io/
==========================
Stay tuned to our channel to learn more:
/ @learningsimplified
=====================================================
Watch for relevant blogs at :
http://learnsimple1987.blogspot.in/
=====================================================
Our G+ profile is at:
https://plus.google.com/u/0/b/1086166...
=====================================================
Twit us at:
/ learnmaniac1987
=====================================================
~-~~-~~~-~~-~
Please watch: "JavaScript Tutorial for Beginners #12- Make a Basic Calculator"
• JavaScript Tutorial for Beginners #12...
~-~~-~~~-~~-~