30
CSS Animation Properties
Before diving into the details, let’s set up the basic CSS:
Animation is a new CSS property that allows for animation of most HTML
elements (such as div, h1 and span) without JavaScript or Flash. At the
moment, it’s supported in Webkit browsers, including Safari 4+, Safari for iOS
(iOS 2+), Chrome 1+ and, more recently, Firefox 5. Unsupported browsers
will simply ignore your animation code, so ensure that your page doesn’t
rely on it!
Because the technology is still relatively new, prefixes for the browser
vendors are required. So far, the syntax is exactly the same for each
browser, with only a prefix change required. In the code examples below,
we use the -webkit syntax.
All you need to get some CSS animation happening is to attach an animation
to an element in the CSS:
/* This is the animation code. */
@-webkit-keyframes example {
from { transform: scale(2.0); }
to { transform: scale(1.0); }
}
/* This is the element that we apply the animation to. */
div {
-webkit-animation-name: example;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease; /* ease is the
default */
-webkit-animation-delay: 1s; /* 0 is the
default */
-webkit-animation-iteration-count: 2; /* 1 is the
default */
Smashing eBook #19│Mastering CSS3│ 177
