CSS Animations and Transitions
From RuntimeWiki
CSS3 Animations and CSS3 Transitions are a powerful set of extensions to CSS that allow an author to modify CSS property values over time, with similar power to what SMIL Animation provides to SVG. The key difference with CSS Animations and CSS Transitions is that animated effects are integrated into the styling syste. As a result, a single style rule (e.g., a class selector) can result in animated effects for all elements that match a particular selector. Because the animation engine is built into the browser, some effects might be subject to hardware acceleration, providing considerably better graphics effects than what is possible via animations in JavaScript.
The specs are at:
Here is an example of CSS3 animations:
div {
animation-name: 'diagonal-slide';
animation-duration: 5s;
animation-iteration-count: 10;
}
@keyframes 'diagonal-slide' {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
Here is an example of CSS3 transitions:
div {
transition-property: opacity;
transition-duration: 2s;
}
The above example defines a transition on the ‘opacity’ property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds.
WebKit browsers (e.g., Safari and Chrome) already support both CSS3 Animations and CSS3 Transitions. Firefox 3.5 and Opera do not yet support CSS3 Animations, although they do support the related feature, CSS3 Transitions. Opera has supported the (technologically similar) SMIL Animation features in SVG for a couple of years.
