There are currently two proposed additions to CSS to make animating easier and with better performance: CSS Transitions and CSS Animations. Both are unfortunately named. The later is complicated, overkill, and probably won’t be supported by non-Webkit browsers, which leaves CSS Transitions as becoming the de-facto way to natively animate on the Web. Besides reducing power-hungry Javascript-based animation, the declarative CSS Transitions opens the door for hardware acceleration and commercial quality games. iOS devices and Safari already do so for buttery smooth results, and hardware acceleration just might make it into Firefox 4.
How Do CSS Transitions Work?
Normally, when you change the value of a CSS property, it changes instantly. With CSS Transitions, they automagically animate over time. Imagine you want to have a rollover indication for links where, on hover, the link changes its background color and jigs up a bit. With CSS Transitions instead of having the effect happen instantly, it can smoothly animated. Here’s how you’d do it.
You’ll have to use the -moz and -webkit prefixes for these properties until the CSS transitions specification is finalized.
a{
transition-property: all;
transition-duration: 350ms;
transition-timing-function: ease-in-out;
position: relative;
background-color: white;
color: black;
}
a:hover{
top: -2px
background-color: black;
color: white;
}
(more…)