Apple’s Webkit team introduced a number of technologies, one of which is CSS Animations, which allow an author to modify CSS property values over time. This is an evolving specification. Expect lots of changes as time goes by.
The good news is that animations are hardware accelerated. The computer’s graphic chip does the heavy lifting, and not the CPU. This speeds animations up from the start.
Here is an example by Anthony Calzadilla:
Involved animations are complicated, and I’m sure that all kinds of tools will be developed to facilitate building more complicated animations, or to export animations from After Effects like the following (which only works in Webkit browsers)
To that end, there are several programs targeting the creation of CSS animations, primarily targeting the building of ads without using Flash, including Sencha’s Animator, Adobe’s Edge and Google’s Google Web Designer . Be aware that most of these solutions rely on javascript to help with the CSS3 animations, but since the program is writing the code, all you need to deal with is a timeline interface.
@Keyframe
You have seen these @ rules used before, in @media, @font-face and @import. At-rules are instructions or directives to the CSS parser.
What follows are two brackets, and all the code is entered inside. This is referred to as the “code block.”
The @keyframe code block contains the keyframes of the animation. The way to write it is:
@-webkit-keyframes name-for-animation {
/* RULE SETS */
}
In between the brackets are the rule sets, which always start with the start and stop keyframes: from or 0% and to or 100%. The entire keyframe at rule looks like:
@-webkit-keyframes name-for-animation {
0% /* from */{
}
100% /* to */ {
}
}
All other reframes come between the start and end, and you can use from and to, or 0% and 100% keyframes. To make it work, however, you also need to include the animation name as a quality of the animation property.
Now to assign the keyframes. In the demo below, the div with and id of “ani-1” contains the animation property shorthand that calls up the keyframe at rule.
Within this property we’re specifying the name of the animation animation-name: name-for-animation, to specify which keyframes to use, the duration, animation-duration: 10s, the timing function: animation-timing-function: linear and the number of times to repeat the keyframes animation-iteration-count: infinite.
There is also a direction property animation-direction: normal, and the possibility to set a delay animation-delay: 0.
You can change the animation, but to get the demo to register the changes, you need to temporarily change the keyframe name in the animation property, and then change it back, and it will recognize any changes you’ve made to the keyframes, otherwise it will continue on its previously determined course. The animation is set up for webkit only.
CSS Code View
The animation could have been optimized. I could have used the transform property, rather than top and left, which is suppose to be faster, and use sub pixel rendering to create a more fluid experience.
Animation is in its infancy, and the specification will evolve and change several times before settling down, but it’s actively being implemented by all major browsers and here to stay. If you want to peruse CSS animations, check out Lea Veroa’s Animatable for inspiration.
Interactive Stories/Ads
Digital storytelling — Designing this Interactive HTML5 Storybook is explained in detail at the end of the story.
Google recently introduced Google Web Designer and Adobe has The Edge Suite and in particular Edge Animate. These tools produce interactive content for desktop and mobile devices. See the Adobe Edge tools used to showcasethemselves.
Flash used to dominate this domain, which was used primarily for ads, but was pushed out after stepping foul of Apple’s QuickTime and the popularity of the iPhone. Who wants to pay for ads that wealthy iPhone owners cannot see?
That left a vacuum that CSS3, HTML5 and Javascript are supposed to fill. CSS, HTML and Javascript are not Flash, and as you can see, even creating basic animation is challenging.
To solve this, both programs provide a drag-and-drop, easy-to-use user interface for creating animation and interactivity using HTML, CSS and JavaScript. Adobe wants to recapture the Flash market, and Google wants people to create ads, because that is where Google makes its money. Google is an expert at the commercialization of good will.
Though we have access to both programs, I like the way Google Designer allows me to switch to code view and edit the parameters directly. Adobe Edge Animate requires Edge Code to look at the underlying code, and may be more ambitious in the long run, but it is not nearly so interesting and useful for us as Google’s Web Designer.
Google Web Designer
Download a copy and use it to do your animatic or motion enabled ad. Instructions on how to use the program can be found on the original download page.