Grow your CSS skills. Land your dream job.

#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

Comments

  1. Filip

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

    ThankZ for video!!!

  2. 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. Wow man, i love it

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

  6. Sjur

    No WebM video?

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

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

  8. wow
    nice tutorail
    i love you chris ^^

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

    Increible…..

  13. chronos

    awesome!!

  14. Funny and awesome!!!

  15. pewpewpew! Awesome intro to CSS animation!

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

  28. shishir

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

  29. 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!!!!
    smileys

  32. 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. Frefox 5 is arrived!

  36. 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;
    becomes
    -moz-animation: move-city-top 15s infinite linear;
    and
    @-webkit-keyframes move-city-top
    becomes
    @-moz-keyframes move-city-top

  37. 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. 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
    thanks
    :P

  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?

    div
    {
    -webkit-animation: shit-test 1s;
    position:absolute;
    left:500px;
    top:100px;
    width:200px;
    height:200px;
    color:red;
    background-color:red;
    }

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

    }

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

    • 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. 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. Hi sir,

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

    Thanks in advance!

    Daniel

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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".