#97: Intro to CSS Animations

Animations, like transitions, can alter page elements over time. Animations are more powerful and more complex in many ways. You need to declare an animation with a special syntax before you can use it, which allows you to specify values for multiple properties at different percentages of the animations completion ("keyframes"). Then when you do use it, there are lots of values you can set as to how you want it to behave. We'll cover all that as we build a fun little animated scene.

View Demo   Download Files


  1. User Avatar

    Hey guy you,re web monter :)))…

    ThankZ for video!!!

  2. User Avatar

    That’s cool

  3. User Avatar

    Pachow pachow! Rarrrrrrrgghhhh!

    Lol That’s all I got, thanks for sharing Chris.

    • User Avatar
      Permalink to comment#

      Its a very good lesson. I have been finding that a long time! Thank you very much

  4. User Avatar

    Wow man, i love it

  5. User Avatar
    Michael Weiss

    really great video, I just implemented it in my friends website header. Is there any way to get this to work on pseudo elements. What I want is essentially three background layers with no content in the pseudos and all moving at different speeds. I’ve been trying for the last few hours to get it to work but can’t seem to get it right. Thanks in advanced for any help.

    • User Avatar
      Chris Coyier

      At the time of this writing, only Firefox 4 can animate or transitions pseudo elements =/

  6. User Avatar

    No WebM video?

  7. User Avatar
    creazione siti web

    Really cool animation awesome work and good explanations, thank you
    Chris Coyier!

    shimmy shimmy!! lol, really fun! thanks again!

  8. User Avatar

    nice tutorail
    i love you chris ^^

  9. User Avatar

    Another great and informative yet funny screen cast Chris =)

  10. User Avatar

    The coolest part was the missile launching sound :-)! Good job. Hey, where are the downloadable things you said on video?

  11. User Avatar

    Thank you, i really like your screencasts, very helpful! Keep it!

  12. User Avatar


  13. User Avatar


  14. User Avatar

    Funny and awesome!!!

  15. User Avatar
    Chris C

    pewpewpew! Awesome intro to CSS animation!

  16. User Avatar

    What a cool idea to show these things up, thank you. … We’re getting old ;-)

  17. User Avatar
    Jody Thai

    Chris, I think you will need a SSD drive to take care of Firefox loading time and everything else, the performance will be significantly increased. :).

    P/S: if you need SSD for your Macbook, I recommend OWC brand, they made ssd just for Mac :).

  18. User Avatar
    Conor Haining

    Just a FYI, Android 3.0 (Tablets) Also supports @Keyframes. Just to let you know :)

  19. User Avatar
    Ian Harte

    Mate that is sweet haha! :]

  20. User Avatar

    This is so cool!!

    Thx for the awesome screencast Chris! :)

  21. User Avatar

    Guys, these videos dont play. Am i missing something or a plugin? I am using IE9 on Windows 7. The layout of the video seems broken with the play button at the left top of the video and the controls on the top overlapping the play button. Pressing either the play or controls does not get any response?

  22. User Avatar

    I am new to the site and to css but I’m already blown away by the level of css skills here. I am looking forward to learning more. Thanks. cipro

  23. User Avatar
    Saeed Neamati

    Hi Chris,
    Great work, and really informative, just like always.
    I’d like to cooperate with the community to build a better place to live.
    Here is my website, http://www.thoughtresults.com and I’d like to create some screencasts on HTML5 and CSS3 and JavaScript. But I don’t know how to start.
    Any help is really worthy Chris.

    • User Avatar
      Rikudo Sennin

      There’s a screencast about making screencasts somewhere in this website :P

  24. User Avatar
    Alexander Hultner

    Really awesome for some stuff, hopefully this can be implemented in a way so that it’s more cpu/gpu efficient then animating with javascript. Much of the animation stuff done with jQuery and such are becoming more and more obsolete.

    The bad side is that I can really se how this will be abused a few years from now when it’s more widespread and there are tools out to create these animations for you. Ohh the nightmares I’ll have.

    **See paragraphs of text in my head fly around spinning and blinking in different colours like a blimp over a stadium, internet adds of tomorrow**

  25. User Avatar

    Just when I thought CSS couldnt get any better! I think il stick to Flash form most of my animations thought to be honest

  26. User Avatar

    This is really nice…. Thanx !!!!

  27. User Avatar

    Hi Chris this is awesome! But I wonder as you’ve mentioned in the end of the screen cast, when are you gonna put the css files for us to play around?

    • User Avatar
      Chris Coyier

      Thanks for reminding me, I put the demo/download links above the video.

  28. User Avatar

    This site has always been my learning platform.
    I cant wait for more cool stuffs to learn from here. Awesome Chris.

  29. User Avatar

    Hey, thanks for the tip! You really explained it well (and in a funny way). :)

  30. User Avatar
    Jaded Tech

    Nice little animation, I looked at the demo on my iPad to see if it would work there. Found that the city scape loads last and only one of the bullets shows up.

  31. User Avatar

    Hey Chris this 1’s awesome…keep d good work going ….

    n yea Thank you!!!!

  32. User Avatar
    Permalink to comment#

    Totally sweet tut as ever Chris! The only thing I would recommend would be to see if you could wait for the images to fully load before starting the animation, because you do sometimes get some weirdness, and the effect is lost completely if the images load after the animation that brings the monkey in is already loaded.

  33. User Avatar
    Permalink to comment#

    Another great demo showing off the power of CSS and CSS3. Ideas, ideas ideas……

    That’s Chris Coyier for you, getting more done at Thu 9:13am than the rest of us do all day.

  34. User Avatar
    Permalink to comment#

    Nice tutorial !

    The Gorilla in Rampage is called George, Ralph was the Werewolf and Lizzie the lizzard thing !

    Wasted a lot of time when I was younger on those arcade machines :-)

  35. User Avatar
    Permalink to comment#

    Frefox 5 is arrived!

  36. User Avatar
    Permalink to comment#

    I have “ported” it for firefox 5. Extremely simple change.
    Here: http://www.squrk.com/perma/animation/

    -webkit-animation: move-city-top 15s infinite linear;
    -moz-animation: move-city-top 15s infinite linear;
    @-webkit-keyframes move-city-top
    @-moz-keyframes move-city-top

  37. User Avatar
    Permalink to comment#

    nice primer on css animations, video was informative and entertaining, Thanks Chris!

  38. User Avatar

    This is the funniest & the most creative video tutorial ever!!:)
    And there’s no need to mention that all of ur works r awesome!
    P.S. I’m still smiling!:)

  39. User Avatar

    Thanks, this video helped me alot!

  40. User Avatar
    Permalink to comment#

    wooow !!
    always wanted to do something like this,
    and i use chrome .. so reeeeeely great

  41. User Avatar
    John Bon
    Permalink to comment#

    I’m having a hard time figuring this out. I’m trying to animate in a direction and have it sit where it animates to. Instead it bounces back. Can someone explain how to get this to work correctly?

    -webkit-animation: shit-test 1s;

    @-webkit-keyframes shit-test {
    from { left:500px; }
    to { left:300px; }


    • User Avatar
      Digital Robot Gorilla
      Permalink to comment#

      Have you tried adding

      -webkit-animation-iteration-count: 1?

      This is the number or times it plays, I know default is once anyway but it might just work.

      You’ll so find by default the animation is reset.

    • User Avatar
      Digital Robot Gorilla
      Permalink to comment#

      I’ve just noticed would you not just change your absolute positioning to: left:300px? As this is where you would like the animation to finish, because it’s already starting from left:500px.

      Just a thought.

  42. User Avatar
    Max Henchman
    Permalink to comment#

    Really cool! already implemented it into my site :)

  43. User Avatar
    Les Kendall
    Permalink to comment#

    Great tutorial Chris. HTML5 with CSS is something special.

  44. User Avatar
    Permalink to comment#

    Firefox 7, this is not working.

    • User Avatar
      Permalink to comment#

      This demo use -webkit- prefix.
      I guess you can add -moz- to make it work in Firefox 7

  45. User Avatar
    Permalink to comment#

    @21:30 “i like not closing tags” …. we got a badass here!

  46. User Avatar
    Daniel B.

    Hi sir,

    Could you help me, to this css transition works in firefox.

    Thanks in advance!


  47. User Avatar
    Permalink to comment#

    Hey Chris,

    What do you do when you firebug your site and the css animation isn’t even acknowledging your webkit call? I am working on a mysitemyway theme (deja vu) so I don’t know if their is a different approach to it or not. I put the css into the custom css box and directly into the style sheet when that didn’t work….and still nothing.

    Any clarification would be much appreciated . Thanks.

  48. User Avatar
    Joshua Mitchell
    Permalink to comment#

    Firefox 27 now supports animations (and has for a while), as well as Safari, Opera, and possibly even MSIE (I think). Just repeat the syntax without the -webkit- in animation and @keyframes.

    All-in-all, it was a great tutorial! Thanks a lot, you really helped me out. ^^

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.