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.
#97: Intro to CSS Animations
Chris Coyier
on
(Updated on )
Hey guy you,re web monter :)))…
ThankZ for video!!!
That’s cool
Pachow pachow! Rarrrrrrrgghhhh!
Lol That’s all I got, thanks for sharing Chris.
Its a very good lesson. I have been finding that a long time! Thank you very much
Wow man, i love it
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.
At the time of this writing, only Firefox 4 can animate or transitions pseudo elements =/
No WebM video?
Really cool animation awesome work and good explanations, thank you
Chris Coyier!
shimmy shimmy!! lol, really fun! thanks again!
wow
nice tutorail
i love you chris ^^
Another great and informative yet funny screen cast Chris =)
The coolest part was the missile launching sound :-)! Good job. Hey, where are the downloadable things you said on video?
Thank you, i really like your screencasts, very helpful! Keep it!
Increible…..
awesome!!
Funny and awesome!!!
pewpewpew! Awesome intro to CSS animation!
What a cool idea to show these things up, thank you. … We’re getting old ;-)
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 :).
Just a FYI, Android 3.0 (Tablets) Also supports @Keyframes. Just to let you know :)
Mate that is sweet haha! :]
This is so cool!!
Thx for the awesome screencast Chris! :)
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?
use Chrome
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
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.
There’s a screencast about making screencasts somewhere in this website :P
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**
Just when I thought CSS couldnt get any better! I think il stick to Flash form most of my animations thought to be honest
This is really nice…. Thanx !!!!
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?
Thanks for reminding me, I put the demo/download links above the video.
This site has always been my learning platform.
I cant wait for more cool stuffs to learn from here. Awesome Chris.
Hey, thanks for the tip! You really explained it well (and in a funny way). :)
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.
Hey Chris this 1’s awesome…keep d good work going ….
n yea Thank you!!!!
smileys
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.
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.
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 :-)
Frefox 5 is arrived!
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-topbecomes
@-moz-keyframes move-city-topnice primer on css animations, video was informative and entertaining, Thanks Chris!
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!:)
Thanks, this video helped me alot!
wooow !!
always wanted to do something like this,
and i use chrome .. so reeeeeely great
thanks
:P
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.
Really cool! already implemented it into my site :)
Great tutorial Chris. HTML5 with CSS is something special.
Firefox 7, this is not working.
This demo use -webkit- prefix.
I guess you can add -moz- to make it work in Firefox 7
@21:30 “i like not closing tags” …. we got a badass here!
Hi sir,
Could you help me, to this css transition works in firefox.
Thanks in advance!
Daniel
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.
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. ^^
Great video!