Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

An Introduction To CSS3 Keyframe Animations

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 expected.

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

Further Reading Link

(al) (vf) (il)

Footnotes Link

  1. 1 http://www.w3.org/TR/css3-animations/
  2. 2 http://en.wikipedia.org/wiki/W3C_recommendation#Working_Draft_.28WD.29
  3. 3 http://www.impressivewebs.com/demo-files/css3-animated-scene/
  4. 4 http://www.impressivewebs.com/demo-files/css3-animated-scene/
  5. 5 http://reference.sitepoint.com/css/atrulesref
  6. 6 https://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
  7. 7 http://dev.w3.org/csswg/css3-animations/#animation-timing-function
  8. 8 http://www.w3.org/TR/css3-animations/#animation-play-state
  9. 9 http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
  10. 10 http://www.w3.org/TR/css3-animations/#the-animation-shorthand-property-
  11. 11 http://www.impressivewebs.com/demo-files/css3-animated-scene/
  12. 12 http://prefixr.com/
  13. 13 http://animationfillcode.com
  14. 14 http://www.w3.org/TR/css3-animations/
  15. 15 http://robertnyman.com/2010/05/06/css3-animations/
  16. 16 http://css3animator.com/
  17. 17 http://www.viget.com/inspire/adding-delight-to-your-design-with-css3-and-webkit-keyframe-animation/
  18. 18 http://css3.bradshawenterprises.com/
  19. 19 http://mir.aculo.us/2010/08/27/creating-awesome-css3-animations/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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

    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).

    -1
    • 2

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

      0
    • 3

      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
  2. 6

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

    0
    • 7

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

      -3
      • 8

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

        3
        • 9

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

          -2
          • 10

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

            1
          • 11

            “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
          • 12

            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
        • 13

          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 )

          -2
          • 14

            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
          • 15

            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.

            -1
        • 16

          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!

          -1
    • 17

      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

      -1
      • 18

        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.

        -1
  3. 19

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

    0
  4. 20

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

    0
    • 21

      Ben Goodyear

      May 17, 2011 4:38 am

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

      0
  5. 22

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

    0
  6. 23

    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
  7. 24

    Ben Goodyear

    May 17, 2011 4:27 am

    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
  8. 25

    thumbs up! great intro into css3 animation

    0
  9. 26

    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
  10. 27

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

    0
    • 28

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

      0
      • 29

        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
        • 30

          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
    • 31

      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
  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

    Kyle Keeling

    May 17, 2011 8:04 am

    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

    Ezrad Lionel

    May 17, 2011 8:49 am

    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
  19. 44

    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
  20. 45

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

    0

↑ Back to top