#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. Filip

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

    ThankZ for video!!!

  2. rotub

    That’s cool

  3. Alistair

    Pachow pachow! Rarrrrrrrgghhhh!

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

    • Largo
      Permalink to comment#

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

  4. latiosaxe

    Wow man, i love it

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

    • Chris Coyier

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

  6. Sjur

    No WebM video?

  7. creazione siti web

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

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

  8. amrabdelaziz

    nice tutorail
    i love you chris ^^

  9. Chris

    Another great and informative yet funny screen cast Chris =)

  10. Fabio

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

  11. Rudkovsky

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

  12. Aldiablo


  13. chronos


  14. Nacho

    Funny and awesome!!!

  15. Chris C

    pewpewpew! Awesome intro to CSS animation!

  16. Oliver

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

  17. 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. Conor Haining

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

  19. Ian Harte

    Mate that is sweet haha! :]

  20. Martin

    This is so cool!!

    Thx for the awesome screencast Chris! :)

  21. JAA

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

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

    • Rikudo Sennin

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

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

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

    This is really nice…. Thanx !!!!

  27. Shishir

    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?

    • Chris Coyier

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

  28. shishir

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

  29. Rafay

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

  30. 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. Akshay

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

    n yea Thank you!!!!

  32. Jack
    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. IanG
    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. Orca
    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. rudywaltz
    Permalink to comment#

    Frefox 5 is arrived!

  36. GeneralKnowledge
    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. Osura
    Permalink to comment#

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

  38. Driada

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

    Thanks, this video helped me alot!

  40. 9ale7
    Permalink to comment#

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

  41. 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; }


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

    • 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. Max Henchman
    Permalink to comment#

    Really cool! already implemented it into my site :)

  43. Les Kendall
    Permalink to comment#

    Great tutorial Chris. HTML5 with CSS is something special.

  44. Dan
    Permalink to comment#

    Firefox 7, this is not working.

    • YeHao
      Permalink to comment#

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

  45. steve
    Permalink to comment#

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

  46. Daniel B.

    Hi sir,

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

    Thanks in advance!


  47. Clint
    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. 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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.