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:

#ID_HERE {
-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:

https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode

“transition” method: (Use this method if you want to initiate the animation after an action)

From the W3schools example:

div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}

div:hover
{
width:300px;
}

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:

http://css3.bradshawenterprises.com/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