Apple’s Webkit team has 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 will be doing the heavy lifting, and not the CPU. This should speed animations up from the start.

Involved animations are complicated, and I’m sure that the future will develop all kinds of tools that will help facilitate building more complicated animations. 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 andy clarke. Be aware that most of these solutions rely on javascript for their 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. The @keyframe 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.

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.

Animation is in its infancy, and the specification will evolve and probably change several times before it settles down, but it’s actively being implemented by all major browsers, so its here to stay. If you want to pursue CSS animations, check out CSS3 Animator for a great resource.