CSS Animations is a proposed module for Cascading Style Sheets that allows the animation of HTML document elements using CSS.With CSS3, we can create animations which can replace Flash animations, animated images, and JavaScript's in existing web pages.
Browser Support?
Here is a video to demonstrate how use use certain css animations:
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 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 does not 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 */
-webkit-animation-direction: alternate; /* normal is the default */
}Principles of Traditional Animation
Squash and Stretch
The crude bouncing ball is a great demonstration of this first point. If the ball falls at a high velocity and hits the floor, you’ll see it squash down from the force and then stretch back out as it bounces up.
At a basic level, this should give our animation a sense of weight and flexibility. If we dropped a bowling ball, we wouldn't expect it to flex at all it might just damage the floor.
Staging
Try to give a stage to the scene; put the animation in context. Thinking back to Disney films, what would they be without the fantastic background artwork? That’s half of the magic!
The stage is also key to focusing attention. Much like on a theater stage, lighting will be cast on the most important area. The stage should add to the illusion. With our bouncing ball, I’ve added a simple background to focus on where the ball will land. Now the viewer knows that the action will take place in the center, and the scene is no longer lost in snow.
For more information and example follow the links below:
