CSS Animation Methods
There are 2 popular ways to use CSS animations
“animation-name” Method: (The animation will happen as soon as you load)
Use -webkit-animation-name: Something;
**Usually, if you don’t describe an end state for your webkit animation it will go back to its original state, to avoid this use animation fill mode:
“transition” method: (Use this method if you want to initiate the animation after an action)
From the W3schools example:
-webkit-transition:width 2s; /* Safari */
In this case, the transition will ONLY happen during the hover, the “webkit-transition” method WILL NOT allow you to activate it onload, in this case it is better to use the ‘webkit-animation-name’ way.
More About CSS3 Transitions:
Of course, you can also use jQuery for the animation but it is very taxing to use the DOM, the CSS way is A LOT faster because it will leverage the GPU.