Surfin' Safari

CSS Animation

Posted by Dean Jackson on Thursday, February 5th, 2009 at 3:40 pm

WebKit now supports explicit animations in CSS. As a counterpart to transitions, animations provide a way to declare repeating animated effects, with keyframes, completely in CSS.


Screenshot of the leaves animation

With a recent nightly build, you can see the above animation in action.

Let’s take a look at how to use CSS animations, starting with an example of a bouncing box.

Bouncing text animation

See this example live in a recent WebKit nightly build.

Specifying animations is easy. You first describe the animation effect using the @-webkit-keyframes rule.

@-webkit-keyframes bounce {
 from {
   left: 0px;
 }
 to {
   left: 200px;
 }
}

A @-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation. The animation engine will smoothly interpolate style between the keyframes. In the above example we define an animation called “bounce” to have two keyframes: one for the start of the animation (the “from” block) and one for the end (the “to” block).

Once we have defined an animation, we apply it using -webkit-animation-name and related properties.

div {
 -webkit-animation-name: bounce;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
}

The above rule attaches the “bounce” animation, sets the duration to 4 seconds, makes it execute a total of 10 times, and has every other iteration play in reverse.

Now, suppose you want to party like it is 1995 and make your own super-blink style. In this case we specify an animation with multiple keyframes, each with different values for opacity, background color and transform.

@-webkit-keyframes pulse {
 0% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
 33% {
   background-color: blue;
   opacity: 0.75;
   -webkit-transform: scale(1.1) rotate(-5deg);
 }
 67% {
   background-color: green;
   opacity: 0.5;
   -webkit-transform: scale(1.1) rotate(5deg);
 }
 100% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
}

.pulsedbox {
 -webkit-animation-name: pulse;
 -webkit-animation-duration: 4s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-in-out;
}

Screenshot of the pulsing text animation

Again, see this example live in a recent WebKit nightly build.

Keyframes are specified using percentage values, defining the moment along the animation duration that the keyframe snapshots. The “from” and “to” keywords are equivalent to “0%” and “100%” respectively.

CSS Animations is one of the enhancements to CSS proposed by the WebKit project that we’ve been calling CSS Effects (eg. gradients, masks, transitions). The goal is to provide properties that allow Web developers to create graphically rich content. In many cases animations are presentational, and therefore belong in the styling system. This allows developers to write declarative rules for animations, replacing lots of hard-to-maintain animation code in JavaScript.

The other good news is that the WebKit on iPhone 2.0 already supports CSS Animations (as well as CSS Transforms and CSS Transitions). The iPhone implementation has been optimized for the platform so you get fantastic performance. Combining animations, transitions and transforms allows for some really impressive content.

We’re documenting these enhancements on webkit.org and are proposing the specifications to standards bodies. Note that since they are currently features specific to WebKit they are implemented with a -webkit- prefix, although the specifications do not use the prefix.

You can find more examples on Apple’s Web Applications Developer Center.

As always, leave feedback in the comments and file bugs at http://bugs.webkit.org/.

35 Responses to “CSS Animation”

  1. Dean Jackson Says:

    I didn’t mention this in the blog post since it isn’t purely WebKit news, but Safari on iPhone has support for accelerated animations and transforms, including 3d.

    Check out the examples on Apple’s iPhone dev center (registration required): especially Poster Circle, Card Flip, Finger Tips and Simple Browser.

  2. Gareth Townsend Says:

    Great to see this finally making it into the desktop version of WebKit.

  3. marcus erronius Says:

    Great work! Hopefully other browsers will follow suit on this.

    You mention 3d transforms are available on iPhone’s version of Safari… When might we be seeing this in the desktop nightlies?

  4. cparnot Says:

    Thank you, guys, this is fantastic. And the css approach is very elegant.

  5. dmwdmw Says:

    Beautiful, but does it really need 88% CPU on my December 2007 MacBook? :)

  6. Tiny Clanger Says:

    Looks really nice — but if *any* of those effects were running on a page where I was trying to read content (as opposed to just looking at the pretties) they would be too distracting. This is why I block animated ads.

    PLEASE tell me there’s going to be a “disable CSS animations” pref next to the “disable plugins” and “disable Javascript” ones…

  7. Ahruman Says:

    What’s unclear to me is why in the name of little green apples would I want my browser to do such things? There seems to be a tendency to target features at designers without considering users. At least Flash can be blocked.

  8. darrenbrierton Says:

    I’ve been using CSS Animations, Transitions and Transformations heavily in iPhone WebApp development work, and I have to say that I love them, and think the WebKit guys deserve a great deal of praise. I would also like to thank them and Apple for providing some pretty stellar documentation and examples of how to use them. One thing I would like to see more of on that front is a little more in the way of tutorials or examples of using the Javascript/CSSOM interfaces. I’ve needed to do a lot of things like programmatically adjust the keyframes in an animation, or get the current transformation of a node, and just trying to read the IDL specs is really an uphill struggle. As I said, there are lots and lots of really great examples and documentation on using these for HTML/CSS developers, but hardly any examples for Javascript developers. Nevertheless, this is really fantastic stuff.

  9. cying Says:

    To see a pure web-based (on iPhone) CoverFlow built using CSS Animation with 3D transforms, take a look at

    http://www.satine.org/archives/2008/11/06/coverflow-for-safari-on-iphone/

  10. yourcomrade Says:

    I would much rather see more work on SVG support instead of CSS gimmicks.

  11. cypherpunks Says:

    Note that the PosterCircle, CardFlip, etc. examples are in the Web Apps Dev Center — not the iPhone Dev Center. Also note that they don’t have any spaces in them.

    I just spent 20 minutes searching the iPhone dev center in vane.

  12. cypherpunks Says:

    err… “vain”

  13. Dean Jackson Says:

    Sorry cypherpunks, my bad :(

  14. cjwl Says:

    My understanding is that these extensions are in effect direct use of CoreAnimation via the CSS. Apple has filed for a patent on what amounts to the basis of CoreAnimation ( see http://www.google.com/patents?id=p9qnAAAAEBAJ ). How does the CA patent application affect these WebKit extensions and their submission to a standards body? It is not clear to me that someone could implement these extensions somewhere other than OS X without the possibility of stepping on Apple’s “pat. pending” to get the same behavior.

  15. David Smith Says:

    cjwl: the implementation in WebKit trunk does not currently use Core Animation; even if it at some it in the future it begins to do so, the existing non-Core-Animation version should still work fine.

  16. andiskater Says:

    CSS Animation is great, but I hope to see 3D transforms in desktop webkit soon, too. It’s kind of strange, that they are currently iPhone only.

  17. Adam Polselli Says:

    Had some fun with this today and built a working clock. The only non-CSS code is some PHP to dynamically set the rotate transformations. Check it out! Looks great on an iPhone. http://adampolselli.com/sandbox/css/clock/

  18. Trackback from Frato blog:

    Un slideshow animé sans flash grâce à Canvas…

    Jérôme Wax expérimente avec l’objet canvas, il a créé un diaporama animé entièrement propulsé en javascript et utilisant l’objet canvas. Encore une raison de moins d’utiliser Flash pour réaliser de petites animations sur un …

  19. Distracted Says:

    Great. Some people will do really beautiful, elegant, subtle effects with this.

    Now, for the garish rapidly blinking ads spewed all over the page — there’s going to be a separate preference to turn just CSS Animations off. With a key command.

    Right???

    (BTW why do I have to go to Prefs to turn plug-ins on/off rather than having a key command? Why is there no key command for “Reset Safari…” — and no option like FF to have it run every time the browser is closed?)

  20. Distracted Says:

    And where’s the Safari option to block animated GIFs and push-animations?

  21. pohl Says:

    The inventor of the claw hammer, a device for pounding nails into (and extricating them from) wood was in the villiage square displaying his invention to a gathering of townsfolk. After a brief description of the device’s properties and applications, the crowd became quickly divided into two groups: those who who decried the invention’s ability to bash someone’s head in, and those who said “Meh, why didn’t you invent something for turning screws?”.

    Great work, folks. I didn’t want you to think it was lost on everybody.

  22. Trackback from randalflagg.net:

    Surfin’ Safari – Blog Archive » CSS Animation…

    WebKit now supports explicit animations in CSS. As a counterpart to transitions, animations provide a way to declare repeating animated effects, with keyframes, completely in CSS….

  23. frobnutz Says:

    It eats the -entire- cpu! Even when it’s just twirling some color map.
    That really needs to be fixed before deployment.

  24. gingerbeardman Says:

    Great work!

    Are there any plans for non-repeating animations? Point to point animations with some sort of queue or callback facility?

  25. kaizouman Says:

    Great work, but I have to second yourcomrade on this: why are you inventing all these proprietary CSS extensions when the same result can be achieved using a standard syntax provided by SVG ? As a web developer, I am more inclined to use a well-defined standard than any proprietary extension, even if you are submitting them to the W3C (will it even make it to the standard ?). Static SVG is already supported by at least Safari, Firefox and Opera, but only Opera supports SVG animations: if you are able to provide CSS animations, why not SVG ?

  26. some1 Says:

    Hey Apple Safari/WebKit team, please add XForms, MathML and APNG support to WebKit soon.

  27. lensco Says:

    To the people clamoring for supporting SVG animation: as far as I know, there is no way to manipulate existing DOM elements from within SVG, right? That’s the beauty of this approach.

    We can make all kinds of fancy, bloated animations and such – as we can with SVG – but where this feature will really shine is subtle effects that manipulate existing elements of a web interface.

  28. benjibuls Says:

    Fantastic additions. Have been playing with the gradients, shadows and the likes. Can’t wait for support to get wider, will have to add the animation elements to my examples. Current examples: http://lowbitrate.net/CSS3/

  29. thijsjacobs Says:

    If I were to use the Webkit proposed spec (for testing of the CSS spec), I run into problems when preparing the code for full implementation of the final spec.

    For example:
    @-webkit-keyframes pulse, @keyframes pulse {}

    This completely prevents the animation from rendering.

  30. Zneak Says:

    @lensco: Wrong. ECMAscript is fully supported in SVG files, so are DOM manipulations.

    CSS animations sure are cool, but you could achieve a smiliar result with JavaScript, and using only standart interfaces supported in pretty much every used browser. I think standarts that aren’t implemented in WebKit yet, like MathML and APNG, should be prioritized over proprietary CSS extensions.

  31. TD912 Says:

    Nice work! I see you used this stuff in the Safari 4 intro ‘video’.

    http://www.apple.com/safari/welcome/

  32. druchtie Says:

    Nice work! Finally I can build nasty things like my flash friends of zombo.com! Check out http://simpel.us zombo.com rebuild for Webkit (safari 4) using CSS -gradients, -roundcorners, -fonts, -animation and HTML5.

    The docs: http://dannyruchtie.nl/?p=62

    cheers Danny

  33. rpflo Says:

    People, people, people. To those of you saying “can I disable this!” and “why would you do that?”…

    Some developers may party like it’s 1995 and put garbage in front of you, but real interface designers understand that animation can be an integral part of an application’s interface and usability.

    Quit thinking blinking banners on dailypuppy.com and start thinking applications. Sliding modal boxes instead of nasty popups, images that grow from thumbnail to full image like Preview when clicked, drag and drop “release” behavior, flippy triangles for hierarchical navigation, slide transitions in image galleries, hiding menus and optional content (hit command + shift + | (pipe) and watch it animate, much better than just disappearing).

    Animation helps users know what happened, instead of stuff just disappearing and having the content skip around, or popups increasing their blood pressure. Stuff in the real world doesn’t pop-up (except burglars, and killers), stuff animates.

    I’ve got an app that uses a datagrid that has a form that slides up from the action bar to add or edit records and users love it.

  34. kubenstein Says:

    hi,
    i this is not exactly animation but i thing this post is the best.

    I made 3d music box from elfen lied anime.

    only beta but try it :)

    http://users.pjwstk.edu.pl/~s6052/jap/elfenLied.html

  35. ahrjay Says:

    Here’s a potential issue, say you have a a title that when hovered over reveals a paragraph below it by using the -webkit-transition: height 1s linear; inital height is 0 and the hover height is 100%; instead of revealing the paragraph over a 1 second period, it shows it straight away with no transition from 0 – 100%? If I set the hover height to 100px it works as expected and slowly reveals the paragraph of transition time? Is this the correct behaviour?