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;

Sample code:

-webkit-animation-name: moveright;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;

@-webkit-keyframes moveright
0% {
right: 200px;
100% {
left: 200px;

**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:

transition:width 2s;
-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.

Leave a Reply


Next ArticleMotivation and Passion is a Myth