An Introduction To CSS3 Keyframe Animations

Advertisement

By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module1 in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design.

Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. It’s just another way that CSS3 is helping to solve a real-world problem in an elegant manner. If you haven’t yet started learning the syntax for CSS3 animations, here’s your chance to prepare for when this part of the CSS3 spec moves past the working draft2 stage.

In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it.

Animated Landscape Scene3

A Simple Animated Landscape Scene

For the purpose of this article, I’ve created a simple animated landscape scene to introduce the various aspects of the syntax. You can view the demo page4 to get an idea of what I’ll be describing. The page includes a sidebar that displays the CSS code used for the various elements (sun, moon, sky, ground and cloud). Have a quick look, and then follow along as I describe the different parts of the CSS3 animations module.

(NOTE: Versions of Safari prior to 5.1 have a bug that prevents the animation from finishing correctly. See more under the heading “The Animation’s Fill Mode”)

I’ll describe the CSS related to only one of the elements: the animated sun. That should suffice to give you a good understanding of keyframe-based animations. For the other elements in the demo, you can examine the code on the demo page using the tabs.

The @keyframes At-Rule

The first unusual thing you’ll notice about any CSS3 animation code is the keyframes @ rule. According to the spec, this specialized CSS @ rule is followed by an identifier (chosen by the developer) that is referred to in another part of the CSS.

The @ rule and its identifier are then followed by a number of rule sets (i.e. style rules with declaration blocks, as in normal CSS code). This chunk of rule sets is delimited by curly braces, which nest the rule sets inside the @ rule, much as you would find with other @ rules5.

Here’s the @ rule we’ll be using:

@keyframes sunrise {
	/* rule sets go here … */
}

The word sunrise is an identifier of our choosing that we’ll use to refer to this animation.

Notice that I’m using not using any vendor prefixes for all of the code examples here and in the demo. I’ll discuss browser support at the end of this article, but for now just realize that currently no browser supports this standard syntax, so to get the code working, you have to include all the vendor prefixes.

The Keyframe Selectors

Let’s add some rule sets inside the @ rule:

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}

With the addition of those new rule sets, we’ve introduced the keyframe selector. In the code example above, the keyframe selectors are 0%, 33%, 66%, and 100%. The 0% and 100% selectors could be replaced by the keywords “from” and “to,” respectively, and you would get the same results.

Each of the four rule sets in this example represents a different snapshot of the animated element, with the styles defining the element’s appearance at that point in the animation. The points that are not defined (for example, from 34% to 65%) comprise the transitional period between the defined styles.

Although the spec is still in development, some rules have been defined that user agents should follow. For example, the order of the keyframes doesn’t really matter. The keyframes will play in the order specified by the percentage values, and not necessarily the order in which they appear. Thus, if you place the “to” keyframe before the “from” keyframe, the animation would still play the same way. Also, if a “to” or “from” (or its percentage-based equivalent) is not declared, the browser will automatically construct it. So, the rule sets inside the @ rule are not governed by the cascade that you find in customary CSS rule sets.

The Keyframes That Animate the Sun

For the purpose of animating the sun in this demo, I’ve set four keyframes. As mentioned, the code above includes comments that describe the changes.

In the first keyframe, the sun is red (as if it were just rising or setting), and it is positioned below ground (i.e. not visible). Naturally, the element itself must be positioned relatively or absolutely in order for the left and bottom values to have any effect. I’ve also used z-index6 to stack the elements (to make sure, for example, that the ground is above the sun). Take note that the only styles shown in the keyframes are the styles that are animated. The other styles (such as z-index and position, which aren’t animated) are declared elsewhere in the style sheet and thus aren’t shown here.

0% {
	bottom: 0; /* sun at bottom */
	left: 340px; /* sun at right */
	background: #f00; /* sun is red */
}

About one third of the way into the animation (33%), the sun is on the same horizontal plane but has risen and changed to a yellow-orange (to represent full daylight):

33% {
	bottom: 340px; /* sun rises */
	left: 340px;
	background: #ffd630; /* changes color */
}

Then, at about two thirds into the animation (66%), the sun has moved to the left about 300 pixels but stays on the same vertical plane. Notice something else in the 66% keyframe: I’ve repeated the same color from the 33% keyframe, to keep the sun from changing back to red too early.

66% {
	bottom: 340px;
	left: 40px; /* sun moves left across sky */
	background: #ffd630; /* maintains its color */
}

Finally, the sun gradually animates to its final state (the full red) as it disappears below the ground.

100% {
	bottom: 0; /* sun sets */
	left: 40px;
	background: #f00; /* back to red */
}

Associating The Animation Name With An Element

Here’s the next chunk of code we’ll add in our example. It associates the animation name (in this case, the word sunrise) with a specific element in our HTML:

#sun.animate {
	animation-name: sunrise;
}

Here we’re introducing the animation-name property. The value of this property must match an identifier in an existing @keyframes rule, otherwise no animation will occur. In some circumstances, you can use JavaScript to set its value to none (the only keyword that has been reserved for this property) to prevent an animation from occurring.

The object we’ve targeted is an element with an id of sun and a class of animate. The reason I’ve doubled up the id and class like this is so that I can use scripting to add the class name animate. In the demo, I’ve started the page statically; then, with the click of a button, all of the elements with a particular class name will have another class appended called animate. This will trigger all of the animations at the same time and will allow the animation to be controlled by the user.

Of course, that’s just one way to do it. As is the case with anything in CSS or JavaScript, there are other ways to accomplish the same thing.

The Animation’s Duration And Timing Function

Let’s add two more lines to our CSS:

#sun.animate {
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
}

You can specify the duration of the animation using the animation-duration property. The duration represents the time taken to complete a single iteration of the animation. You can express this value in seconds (for example, 4s), milliseconds (2000ms), and seconds in decimal notation (3.3s).

The specification doesn’t seem to specify all of the available units of time measurement. However, it seems unlikely that anyone would need anything longer than seconds; and even then, you could express duration in minutes, hours or days simply by calculating those units into seconds or milliseconds.

The animation-timing-function property, when declared for the entire animation, allows you to define how an animation progresses over a single iteration of the animation. The values for animation-timing-function are ease, linear, ease-out, step-start and many more, as outlined in the spec7.

For our example, I’ve chosen ease, which is the default. So in this case, we can leave out the property and the animation will look the same.

Additionally, you can apply a specific timing function to each keyframe, like this:

@keyframes sunrise {
   0% {
      background: #f00;
      left: 340px;
      bottom: 0;
      animation-timing-function: ease;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
      animation-timing-function: linear;
   }

   66% {
      left: 40px;
      bottom: 340px;
      background: #ffd630;
      animation-timing-function: steps(4);
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
      animation-timing-function: linear;
   }
}

A separate timing function defines each of the keyframes above. One of them is the steps value, which jerks the animation forward a predetermined number of steps. The final keyframe (100% or to) also has its own timing function, but because it is for the final state of a forward-playing animation, the timing function applies only if the animation is played in reverse.

In our example, we won’t define a specific timing function for each keyframe, but this should suffice to show that it is possible.

The Animation’s Iteration Count And Direction

Let’s now add two more lines to our CSS:

#sun.animate {
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
}

This introduces two more properties: one that tells the animation how many times to play, and one that tells the browser whether or not to alternate the sequence of the frames on multiple iterations.

The animation-iteration-count property is set to 1, meaning that the animation will play only once. This property accepts an integer value or infinite.

In addition, the animation-direction property is set to normal (the default), which means that the animation will play in the same direction (from start to finish) each time it runs. In our example, the animation is set to run only once, so the property is unnecessary. The other value we could specify here is alternate, which makes the animation play in reverse on every other iteration. Naturally, for the alternate value to take effect, the iteration count needs to have a value of 2 or higher.

The Animation’s Delay And Play State

Let’s add another two lines of code:

#sun.animate {
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 5s;
	animation-play-state: running;
}

First, we introduce the animation-delay property, which does exactly what you would think: it allows you to delay the animation by a set amount of time. Interestingly, this property can have a negative value, which moves the starting point partway through the animation according to negative value.

The animation-play-state property, which might be removed8 from the spec, accepts one of two possible values: running and paused. This value has limited practical use. The default is running, and the value paused simply makes the animation start off in a paused state, until it is manually played. You can’t specify a paused state in the CSS for an individual keyframe; the real benefit of this property becomes apparent when you use JavaScript to change it in response to user input or something else.

The Animation’s Fill Mode

We’ll add one more line to our code, the property to define the “fill mode”:

#sun.animate {
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 5s;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

The animation-fill-mode property allows you to define the styles of the animated element before and/or after the animation executes. A value of backwards causes the styles in the first keyframe to be applied before the animation runs. A value of forwards causes the styles in the last keyframe to be applied after the animation runs. A value of both does both.

UPDATE: The animation-fill-mode property is not in the latest draft of the spec, but it is found in the editors draft9. Also, certain versions of Safari (5.0 and older) will only apply a value of “forwards” if there are exactly two keyframes defined. These browsers always seems to use the 2nd keyframe as the “forwards” state, which is not how other browsers do it; the correct behaviour uses the final keyframe. This is fixed in Safari 5.1.

Shorthand

Finally, the specification describes shorthand notation10 for animations, which combines six of the properties described above. This includes everything except animation-play-state and animation-fill-mode.

Some Notes On The Demo Page And Browser Support

As mentioned, the code in this article is for animating only a single element in the demo: the sun. To see the full code, visit the demo page11. You can view all of the source together or use the tabs in the sidebar to view the code for individual elements in the animation.

The demo does not use any images, and the animation does not rely on JavaScript. The sun, moon and cloud are all created using CSS3’s border-radius, and the only scripting on the page is for the tabs on the right and for the button that lets users start and reset the animation.

Here are the browsers that support CSS3 keyframe animations:

  • Chrome 2+,
  • Safari 4+,
  • Firefox 5+,
  • IE10 PP3,
  • iOS Safari 3.2+,
  • Android 2.1+.

Although no official announcement has been made, support in Opera is expected12.

If you code your animations using a single vendor-based syntax, you can use a tool like Prefixr13 or Animation Fill Code14 to automatically fill in the extra code for you.

Further Reading

(al) (vf) (il)

↑ Back to topShare on Twitter

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

  1. 1

    Simply Awesome! amazed what can be done via technology now..

    0
    • 2

      you mean what flash was able to do 10 years ago? yea technology is great

      0
      • 3

        That’s like saying “what video was able to do 20 years ago”. It’s different kinds of technology that does different things.

        0
        • 4

          No its not – It is simple shape animation vs. simple shape animation. I used to hack animations with code like this on an Amiga.

          0
          • 5

            Flash is going to die because apple doesn’t support it at all… that’s the future.

            0
          • 6

            “Flash is going to die because apple doesn’t support it at all… that’s the future.”

            Do you know anything about Adobe or Flash? Adobe is doing amazing things to support Flash… they’re just repurposing it. A few weeks ago I spent 3 days straight at an Adobe technology conference and they have amazing things coming out. 3D for Flash, Molehill, as well as a program that is similar to Flash but exports animation as HTML. Not to mention now you can use Flash Builder + Adobe Flex to develop apps for iOS, Android and Blackberry.

            Adobe realizes that things like web banners and simple web animations Flash isn’t appropriate for anymore. But it still has a very significant purpose other than just tweens and glitz.

            0
          • 7

            God! Flash is not dying… The problem is that developers have adopted Flash as a tool it was not made for at first. Flash is an animation software tool. By saying that, it has to be understood as a kind of tool wich facilitates Animated Presentations with Interactions, and closed to “video” display.
            Flash is growing and also going back to its origins.
            The associtation between illustrator, flash and after effects, with all the respects, you might not know it. Flash is still for more years a needed tool.
            Regards!

            0
        • 8

          it’s not ,
          Flash is the same technology. You use the same/similar code in flash to do exactly the same thing. ( ActionScript )
          Keyframe animation for web content. Flash does that and much more.
          The difference is that css is open to browsers. Flash require the browser to have a plugin.

          I am all for css and HTML5 developing and hopefully one day it will be better than Flash.

          I really do want to have all my animations , interactive coding , buttons and site functions to be plugin-less.

          I don’t want to HAVE TO use flash or Javascript , but the reality is ,
          I do NEED TO if I want the features and functionality brought to sites.

          dave is right. You could do this in the past and NOW with Flash , and have it work in the majority of browsers. ( which support flash )
          Css3 & HTML5 are infants at the minute.( for interactive animations etc…) they have to grow up first. ( at least they being brought up without profit being their reason for existence )

          0
          • 9

            Flash is dying b/c JS is now standard of the web and CSS is easily controlled by JS and also Apple, Microsoft and Google are on HTML5 and its family(one of the HTML5 family is CSS3, and Canvas).
            Having say that, I’ve been creating “mobile web game” for years and css3 animation is still very limited and if you are trying to create the fancy animation FLASH will be your choice, but using CSS3 whenever possible and that will makes your app or game a lot faster and lighter.

            0
          • 10

            If there was one thing I would have weishd for, however, it would be for some sort of converter program that can take SWFs and create Okozo wallpapers out of them, rather than having to submit these on the Okozo site and wait for them to do it for you. I disagree, for one very good reason Flash has many known vulnerabilities, and if the author of Okozo alone is held responsible for the results of an .okozo file running roughshod over your computer, he is going to be far more careful about what gets converted than any random user would be. Furthermore, he’s unlikely to deliberately exploit those same vulns, whereas if just anyone could create an .okozo from an .swf you can be sure there would be a plague of malicious files in a matter of hours.

            0
        • 11

          8. Is there going to be an Animator vs. Animation IV?- I?m not pinnalng on it. Three reasons:1. Way too time consuming. This last one took an entire year. I logged 325 hours of solid animating time. The thing with sequels is that they need to be way better than their predecessors in order to be any good, so I don?t know if I want to try to top this last one. I have better things to animate.2. Trilogies are way cooler than series of four or more.3. The stick figures blew up the computer. There?s no way to continue from there. I agree to number 3.! Like how could there be a fourth one when the computer was blown up? Although Alan Becker could make some new stick slaves, it would not be praticle! But you could always continue it yourself if you know how to and if it?s okay with Alan Becker! In fact, I want to myself! But what other animations are you going to come out with? 1. What program did you use to do that?- Flash. When I made Animator vs. Animation I and II, it was called Macromedia Flash Professional 8. Now I use Adobe Flash CS4. They can be downloaded at adobe.com/products/flash.Is there an easier way to do it? 3. How long did it take to make that?- Animator vs. Animation ? 3 months- Animator vs. Animation II ? 5 months- Animator vs. Animation: the Game ? 7 months- Animator vs. Animation III ? 1 yearBut why did it take that long for all the videos when Charles Yeh help you with them? 4. Can you teach me how to do that?- Maybe some day. Thing is, I?m a full time student, so I?m pretty busy in general. Other thing is the sheer number of people that want to learn from me. Maybe when I have time I will put up my tips. Honestly though I?m still learning how to animate.Maybe you could teach us after you graduate!

          0
    • 12

      Nice, now you have to be an engineer to animate a circle from one side of the screen, to the other, that’s great.
      Come on guys give me this new tech with a nice IDE Software (like Flash), and then export to CSS3.
      Something that my mom could use. That shoud be the way that new features have to take, simplicity

      0
      • 13

        I think Adobe is working on such a software package. It’s called Adobe Edge Animate. Once you make your animation in that software, it exports it in HTML/CSS, I believe.

        I’m with you though, that graphic designers and artists should not have to know or learn programming to make simple animations.

        I did learn Flash’s ActionScript 2 and 3, but it was very difficult. I am an artist not a scripter or a programmer, and I never took any programming courses while in college. I had to learn AS2 and AS3 by reading books and online tutorials – and again, it was very difficult and time consuming for me to grasp.

        I don’t really want to have to keep learning more of this kind of thing, like having to read books about animation made with CSS and Java Script.

        0
  2. 14

    Nice post, very good and easy to follow guide :)

    0
  3. 15

    awesome :)
    is it possible to make animation in -moz- ?

    0
    • 16

      As far as I am aware CSS3 transitions are supported, but CSS3 keyframe animation as sated above aren’t supported until FF5.

      0
  4. 17

    this has made my day! thank you so much!
    webdev is so exciting these days!

    0
  5. 18

    And if you want to ‘listen’ for events using javascript and jQuery you can use this:

    $(‘#animated_object’).bind({
    ‘webkitAnimationStart’: startFunction,
    ‘webkitAnimationEnd’: endFunction
    });

    function startFunction(){
    console.log(‘Animation started);
    }

    function endFunction(){
    console.log(‘Animation ended’);
    }

    This is webkit only, but there are equivalents for other browsers.

    Check out http://www.caferouge.co.uk/ The homepage has a good example if you are using the latest beta of Chrome or Safari.

    0
  6. 19

    Excellent article, a great introduction to the topic. I would also suggest a good screencast by Chris Coyier on the very same subject: http://css-tricks.com/video-screencasts/97-intro-to-css-animations/ I watched it last night and it was a great primer.

    0
  7. 20

    thumbs up! great intro into css3 animation

    0
  8. 21

    I used it for sfr.com (http://www.sfr.com/fondation-sfr)

    Very cool CSS3 feature! I can’t wait until it’s out on firefox!

    0
  9. 22

    Probably won’t be useful for 3 years or so. What browsers accept this? Firefox and Chrome?

    0
    • 23

      Not trying to be arse’y but have you actually read the article?

      0
      • 24

        But he’s right.

        And I would go so far and say that neither webkit nor moz supports the “CSS3 animate” feature. In my opinion, if a browser needs a prefix (-webkit, -moz) then the browser doesn’t support the attribute.
        What they have is their own attribute that mimics the CSS3 behaviour.
        The CSS files will look rather messy with all the -moz and -webkit in it. You need two or three lines for each attribute.

        That sux…

        0
        • 25

          The point I was trying to make is that it ‘Joe’ asks what browsers this works in when the article clearly states the answer – I wasn’t questioning his statement on when it will become useful.

          0
    • 26

      I agree with you, there is no guarantee that this will work in any way in 3-4 years, due to how much technology changes over time, and what is supported globally. It is definitely interesting to look at, but nothing to count on.

      0
  10. 27

    Anthony Ricaud

    May 17, 2011 5:23 am

    The demo at http://www.impressivewebs.com/demo-files/css3-animated-scene/ does not work with Aurora. Apparently, you should not add quotes around the animation rule. You can use the Web Console (Tools > Web Console) to see the CSS problems (open it before loading the page or reload).

    0
    • 28

      Anthony, thanks for the tip. I’ll have to look into that.

      0
    • 29

      FYI – I’ve corrected the demo page to use the quote-less syntax. Maybe that will help fix it in Aurora. I actually have not downloaded an Aurora build to test yet, so I’ll try to get around to that.

      0
  11. 32

    Good article… Easy to understand. We can’t satisfy the IE customers… :)

    Very thanks for post…

    Cheers,
    Mani

    0
  12. 33

    Would have been nice to include a WebKit link for those who don’t have this support, unless I missed it somewhere.

    0
  13. 34

    FF5 is far away and most used browser is FF. It’s good one though.

    0
    • 35

      Anthony Ricaud

      May 17, 2011 3:56 pm

      Actually, FF5 is “only” 6 weeks away. And FF5 beta is expected later this week.

      0
    • 36

      Dotes & Fred Martinsince itdios MIGHT use it to make exploitative crap, then the entire thing should be crippled.this is the problem with the average computer user. you simply cannot expect developers, or anyone else for that matter, to protect you or your computer. it’s your computer, not his, not anyone elses. and just becuase itdios may try to take advantage of fools doesn’t mean that good things can’t come of it.i guarantee that actual legitimate flash developers could build more useful things than itdios could build crap.personally, I’d love to see what approved plugins would appear on the okozo page if such a converter’ were made public.

      0
  14. 37

    All of this is just great ! I love the fact animation will soon be as easy as described in the article.
    But … should CSS animation be part of the CSS spec ?
    Of course CSS animation is just a “module” in the CSS specification, but IMO that’s no more a “style” module. What do you think ?
    Maybe style and animation are two different tasks and require two different languages ?

    0
  15. 38

    #1 – Chrome
    Only three words: BEST, FAST, MODERN!!

    http://gs.statcounter.com/#browser-ww-monthly-201005-201105

    0
  16. 39

    Aowseome article .. it just work perfectly on google chrome ..
    also in safari but there some thing wrong in the rendering in safari for the clouds

    0
    • 40

      You’re right.

      I’m trying to figure out why this is happening, but it seems that Safari is not responding correctly to the “animation-fill-mode” property, which tells the animation what state to end in.

      The odd thing is, “animation-fill-mode: forwards” works fine in Safari on this page:

      http://css3animator.com/examples/animation-fill-mode/forwards.html

      But does not seem to respond properly in mine.

      There’s something about my code that’s causing Safari to make the animation respond as if I wrote “animation-fill-mode: backwards” or “none” instead of “forwards”.

      As a side point here, for some reason the animation-fill-mode property is not in the spec.

      If anyone has any clue as to what will fix that in Safari, I’m all ears.

      0
    • 41

      So, after some debugging and overall general hair-pulling, it turns out that Safari seems to have a bug, or else some kind of alternate rendering for the “animation-fill-mode” property, which is now fixed in WebKit nightly builds, so this may have been a problem in earlier Chrome versions as well.

      The bug seems to be that “fill-mode” will only work properly when there are exactly two keyframes defined. It always seems to get its “forwards” state from the 2nd keyframe. I’ll add a note to the article to indicate this, and the fact that this is fixed in WebKit nightlies.

      0
  17. 42

    This is fantastic. I can’t wait for all browsers to finally embrace the power of CSS3 and HTML5! Thanks for the brief tutorial, I look forward to playing around with it.

    0
  18. 43

    Matthew Potter

    May 17, 2011 8:14 am

    One of the animations I have been playing with is for a clock. I know there are a bunch of them out there but I thought I would make a complete CSS animation based one. The javascript on the page is only to init the appropriate system time. All animations are via CSS.

    Take a look at the source, all of the code is embedded and it works as a stand-alone .html file: http://askmp.ca/ipad/clock/

    0
  19. 44

    saying CSS3 and HTML5 are powerful is like sitting on a ferrari engine holding two tires expecting to go somewhere fast.

    We all know this has a long way to go and Chrome experiments is no where along that road.

    verdict: gimmick

    conclusion: ignore

    0
  20. 45

    I have an idea!… Go to Flash if you want animations that play on any screen without problems. For iOS, Adobe Wallaby (to convert Flash to HTML5) will be done soon, for CSS3 we have to wait at less 3 years.

    0
  21. 46

    Wow – this makes me miss the flash timeline :). Could do this in about 10 seconds with flash.

    0
  22. 47

    Wow very cool thank you

    0
  23. 48

    I’m all for pushing tech and such, but animation… with CSS? It just seems a bit out of its realm of responsibility.

    But, well, HTML5 and CSS3 are rather progressive tech, to say the least.

    0
  24. 49

    only missing a decent ide.. like flash
    animation with code sucks

    0
  25. 50

    These techniques are cool, but we really need a timeline editor to do productive, inspired – PRODUCTIVE animation. It really is like going back to the early days of animation, hacking keyframes in by hand. Which is cool in way, kind of.

    Flash has a tool that converts timeline animation into jQuery: http://labs.adobe.com/technologies/wallaby/

    Would love to see this for CSS3

    0
  26. 51

    I can not decide if this is a good thing or a bad thing. I believe there are practical applications for animations such as this and other proofs of concept that I have seen out there. But I dread the thought of people placing crappy animations and motion effects on their website like we were back in the early days of Flash. Unfortunately the novelty of this will likely end up upending common sense.

    0
  27. 52

    Who put Javascript in my CSS3? I feel like CSS3 is doing more than it needs to, much like back in the day using HTML to edit the appearance of a site and we deprecated that method. Will CSS3 animation do the same in the not to distant future?

    0
  28. 53

    Like it bookmarked in CSS folder… more…
    pls no petty fight’s over who’s bigger and badder it’s a Demo.

    0
  29. 54

    Thanks for the info, very useful as usual.

    Just a suggestion, if you are going to use CSS just for this, do not waste your time and use Flash. It won´t byte, I promise. For iOs devices just wait 2 or 3 years until flash will be allowed. Fair enough right?.

    0
  30. 55

    I tried it for myself a couple of weeks ago, this css feature is realy awesome, i hope that microsoft implement it, but i think they dont.

    this is the final step to kill flash and silverlight out of our browsers.

    0
  31. 56

    Machteld Ouwens

    May 18, 2011 2:47 am

    Can’t Flash CS5.5 now export this kind of css code?

    0
    • 57

      It can’t, but Adobe has created a beta program called “Wallaby” which does something similar. You can drag your .fla into Wallaby and it exports as CSS3 animations and javascript. Only works with webkit browsers.

      However, Adobe is developing a program called “Edge” which is similar to Flash, but exports as javascript and HTML. It will be cross browser compatible (for now back to IE7 and other modern browsers) It doesn’t harness the CSS3 animation tools due to browser compatibility, but its still amazing. The beta is supposed to be released late 2011.

      0
      • 58

        The disadvantage of the Wallaby is that the exported picture is in “svg” format, which can not be supported on android devices. that’s a pity for us mobile developers.

        I tried to convert a flash to animation with Edge, but its performance on many mobile devices make me disappointed. However, I think it will become better and better since more devices are support canvas hardware acceleration.

        0
    • 59

      You can export from adobe flash profession cs5 the motion xml, which can be coverted to the css3 animation with the help of any script language like python.

      0
  32. 60

    great intro into css3 animation

    0
  33. 61

    Wow. Maybe by CSS 4 it’ll be as useful as JQuery’s “Animate.”

    0
  34. 62

    Totally needs an IDE to do it. Adobe should totally repurpose Flash to export to CSS3, because with an IDE, this can be done like under a minute.

    0
    • 63

      They’re working on a new program called “Edge” which exports animations in javascript and HTML.

      0
  35. 64

    Chris Greenhough

    May 18, 2011 6:43 am

    I almost can’t be bothered to read this because I’m so fed up with all these articles proclaiming this amazing technology with great fanfare… Really? As was mentioned earlier, Flash could do this while our distant ancestors still groped about in primordial sludge. The animations of which Flash is capable are more sophisticated, it’s a shame the haters/bashers (yes, that’s you, too, Apple) look like getting their way after all. A wise man once said “check the bath water for babies”. I for one find it hard to share the euphoria over the supposedly new found ability to animate shapes or play videos (which, lest ye forget, are not cross-browser and demand a plethora of different hosted formats) when other technologies have offered this, and done it better, for a very long time. Animations which play only in webkit browsers? Yay. Sheesh…

    0
  36. 65

    Like many here, I don’t understand the excitement over CSS3 animations, but not because Flash exists as an alternative. jQuery allows for all these types of animations and more, with substantially less code, syntax that is arguably logical, and a callback mechanism that allows for FAR more logical code than the binding of events to CSS3 animation starts or ends. Consider the following jQuery vs. CSS3 comparison from this very example:

    CSS3:
    #sun.animate {
    -webkit-animation-name: sunrise;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    }

    @-webkit-keyframes sunrise {

    0% {
    bottom: 0;
    left: 340px;
    background: #f00;
    }

    33% {
    bottom: 340px;
    left: 340px;
    background: #ffd630;
    }

    66% {
    bottom: 340px;
    left: 40px;
    background: #ffd630;
    }

    100% {
    bottom: 0;
    left: 40px;
    background: #f00;
    }

    }

    JQUERY

    $(‘#sun’).animate({bottom:’340px’,left:’340px’,background:’#ffd630′},333,function(){
    $(this).animate({left:’40px’},333,function(){
    $(this).animate({bottom:0,background:’#f00′},333);
    });
    });

    That’s it. I don’t have to repeat the values that don’t change between keyframes like you do in CSS.

    I won’t even get into the event-binding difference that I mentioned earlier, but trust me, that’s hell.

    0
  37. 66

    @All who are saying “Flash is dead…” same old BS… Flash is not dead, and this CSS3 is just a natural progression for web. Flash is now mostly used in games (for UI interfaces and video *see Doom 3*)

    0
  38. 67

    Web Design New York

    May 20, 2011 1:38 am

    Design look good, efficient & excellent…

    0
  39. 68

    Is this a good thing that CSS is trying to do animation? CSS + Javascript (jQuery) has always the perfect combination for me :)

    0
  40. 69

    The whole discussion on CSS vs Flash is useless. With progressive enhancement in mind there is nothing wrong with browsers not supporting CSS animations. When a browser is not capable of playing flash you’ll need a whole bunch of code to fix this, while CSS degrades nicely.

    Maybe, just maybe CSS animation is not for the real complex animations, but rather for button hovers and other “small” enhancements for users with capable browsers. I also believe it is not meant to produce “movie” like animations like flash. (maybe with a combination of Jquery and CSS it can be).

    I think we all should look forward and play with these new technology’s. They are great and helpful tools for us to accomplish our goals and make our lives easier and quicker. Our job is only to use the right tool at the right time, nothing more.

    0
  41. 70

    In 20 years Avatar 4 will be made in css i hope :) Really nice article, inspiring

    0
  42. 72

    F#cking lame. Not the article but the whole animation thing and what browsers support this.

    Christ Firefox 4 just came out and it doesn’t even support this. So what is the point of using a technology that is only viewed/supported by 10% of the world? Give me a break.

    I build sites for clients and what helps them now. Not on dreams of a technology that may be universal 2 years from now.

    Love what they are trying to accomplish but this is like creating an engine fuel that doesn’t work in any modern day car. Useless.

    0
  43. 74

    Wow. This is odd, I actually made a similar demo of this ages ago, and posted it as a comment to a CSS3 post made on Smashing Magazine.

    http://eriksharp.com/gabs/sun/

    Mine seems to be slightly broken if you’re using the latest Chrome (cloud moves oddly). But if this was honestly the inspiration for the author, I’d love to know it. I’d be very flattered.

    0
    • 75

      Ha, that is funny. No, I had no idea about that demo. Plus, yours is way nicer than mine (graphically), and has some cool extra stuff in there.

      Mine was more of a proof-of-concept, and was not really meant to wow anyone (although it seems to have done so to some degree).

      Thanks for the link.

      0
  44. 76

    Nice tutorial! You can also save yourself a lot of work and use our upcoming Sencha Animator tool :-)

    http://www.sencha.com/products/animator/download/

    Feedback is welcome.

    0
  45. 77

    CSS3 Animations are awesome & this is a really comprehensive tutorial!

    If you need Javascript event notifications for each Keyframe then you might want to take a look at my CSSAnimationKeyframeEvents shim (http://blog.joelambert.co.uk/2011/05/20/css-animation-keyframe-events-javascript-solution/).

    This shim also doubles as a simple way to trigger animations via Javascript.

    0
  46. 78

    Thanks for posting. I learned something and created some animations using CSS3 keyframes,

    http://www.iamkumaran.com/browser-orbit-css3-animation-using-keyframes-and-transform

    0
  47. 79

    This is a very helpful article. Just wondering how you could include audio in the js so it syncs with the play/reset button?

    0
  48. 80

    This is cool….

    0
  49. 81

    Just a note that the upcoming IE10 will support keyframe syntax without prefixes. So, since IE9 doesn’t support keyframe animations, and since nobody will be using ‘IE10pp’ or whatever, then all examples should now omit the ‘-ms-’ part.

    Also, all the examples on this page should be updated to include the standard syntax, for IE10, upcoming FF16 and other browsers that will eventually support keyframe animations unprefixed.http://www.iboardresults.in/

    0

↑ Back to top