CSS3 Animations
By Frank Forte
In the past, we had to use JavaScript to make animations on a page. They would take longer to load and require a lot of extra code and development time.
With CSS3 you can add an animation with a single line of code! Using progressive enhancement, this can really improve the web experience of your website visitors. (Progressive enhancement means that you take a web design or feature that looks good in an old browser and add modern code, in this case CSS3, which does not affect the appearance in the old browser, but will have an enhanced experience for users that have a browser with support for the modern code.) Take the following links as an example.
Hover over each one. The first will “jump” over with no animation, the second will do the exact same thing, unless you have CSS3 support in your browser. Try it with the latest browser version of Google Chrome or Apple Safari.
Look at the CSS below. Notice that the “slide” class, a single line of code, gives the second link the CSS3 animation effect.
<a href="#" class="mover">link one</a>
<a href="#" class="mover slide">link two</a>
a.mover{
display:block;
padding:0;
}
a.mover:hover{
padding-left:10px;
}
a.slide{ -webkit-transition: padding-left 250ms ease-out;}