Fun article. Can’t wait to see CSS animations support grow. A lot of exciting things to come in the next couple years.

@Todd Austin: Yup, I’m also getting a faint line around the #spinner box (Safari/Windows). Must be something to do with the way Safari aliases the mask. It would appear that Chrome doesn’t have the same issue (no alias on the clipping region).

For those wondering if CSS is the place for this sort of thing – my view on it is that it depends entirely on what you’re animating.

If the animation is purely about the presentation of an item, then I think CSS is the right place. The loading spinner is a good example of this – the fact that it spins is just a presentation thing. Being able to have semantic markup and content that indicates loading is occurring, and then change the presentation of that to look like a spinner is a purer implementation than the status quo.

There are times when the animation is actually behavioural, and in those cases JavaScript might be the better tool.

It’s a similar to images. They can be represented in HTML or CSS. We make a call on a case-by-case basis whether the image is content or presentation and then use the appropriate technology. Same goes for animation.

That’s my take on it.

After a night thinking about this, I’m now thinking that my comment was negative, and certainly badly placed.

Let me be clear, I am absolutely behind and am really quite excited by the possibilities demonstrated here, and look forward to seeing more examples.

Banging on about IE and other backwards compatibility is my issue to deal with, and I’ll deal with it elsewhere and through other means. Keep up the good work Tim and everyone else involved in 24ways.

The result is impressive. I definitely have to learn new CSS tags and syntax
(even if I began to use it on my personal website for text-transform or gradient and rounded corners). Not so easy, but when I see what can be done, it’s not a waste of time. Thanks for sharing your experiments on CSS animations.

Thanks very much for the use case on this. I don’t know about everyone else, but use cases always help me learn material more easily.

It’s a pity that we cannot see these animations on most popular browsers. Safari and Chrome are still exceptions.

As for the shape – when I display the first demo in Safari (Win XP) I see soft border of the square, this border is unseen in Chrome.

Great article. We should all be thanking Apple for pushing Safari as much as they do, lets hope the other browser manufacturers catch up soon. Exciting times for CSS.

We are not worthy, Timothy.

I’m still preferring jQuery for animations (although rotations are a pain), just for the broader browser support as much as the fact that the CSS anim syntax is scary. You’ve shown us that CSS based animation is clearly the way forward though, and well explained too!

And the space thing is awesome.

thanks for writing this – exciting stuff…

but…

is anyone else afraid that with all of our flashy new css tricks we’re going to regress back to an age of spinning mail logos, flashing links, and – in general – poor design?

don’t get me wrong – i’m as excited as the next chap about all this – but somewhere in me a warning bell is going off…

will web3.0 be tasteless like web1.0? that’s a nightmare of mine…

but if it’s just me, i’ll gladly go off into the quiet – spinning – night.

Very cool. Thanks for the write up and examples. Love the space one!
Could you explain a little further about the clipping: the webkit rule you used and the background color. I don’t understand what was behind that.

I don’t know if it’s me or the code, but I see a faint outline of a box rotating with the spinner image.

Oooh, loving the spinner idea, Tim. Definitely one of those “why didn’t I think of this myself” moments :|

And now I’m going to bed thinking of numerous CSS/band analogies. Damn you!

Lovely article! Lovely demo! Not so lovely CPU usage in Safari though … roll on OpenGL/hardware-accelerated web browsing!

waits for MBP fan to slow back down

Mmm, so tempting to go from FF to Webkit for dev, just for these CSS features..

@cool moe d: You idiot. He’s talking about the future. Also, why do we still support IE6 because “only” 8% is still using it?

@Tim: great article. Sweet space animation. Now how can I fit something like this in my sites :D

@Cool Moe D – If less than 8% of your users can see it, and the animation is vital to the functionality of the site, then you’d want to use a different technique.

What we’re doing here is introducing the technology, how it can be used and trying to offer some inspiration. It’s up to you to decide how that may or may not apply to any given project.

Great article and a useful use-case.

You could use apng’s for some semi cross browser action.

I’m confident though that Mozilla and Opera will try their very best catching up with all this new CSS goodness soon.

I think that’s an unfair statement to make, as these sort things start life as propriety implementations. Once it becomes a candidate recommendation other browser vendors are much more likely to add the functionality.

Lovely article, Tim, just as last year.

Though I may have to use WebKit animations and transitions on live sites, I’ve found that using it during the design process is a great way to quickly test out user interface experience ideas. If it’s necessary for functionality, I try to replicate it as well as possible with jQuery before going live. These things belong in CSS, though (IMHO), and I sure hope that this is what the future will look like.

Lovely stuff. I’ve been playing with spinning page elements too, but using Jquery to kickstart the spinning. (My example of spinning elements).

I do hope Firefox and Opera add CSS animation. I see the benefit lying in giving the user some highly visual feedback when they interact with specific page elements. We are used to the state of an element changing on hover for example, but if that change was even more dynamic, it would be useful (and just plain fun).

@Ryan Seddon

“I think that’s an unfair statement to make, as these sort things start life as propriety implementations. Once it becomes a candidate recommendation other browser vendors are much more likely to add the functionality.”

Yours is exactly the mistake I made when I first imagined how the W3C’s standards process works. Instead, the CSS Working Group is not an innovation body, it’s a standards body who’s job it is to standardise browser makers’ implementations of CSS.

The working group is a battleground where browser makers push their own commercial agendas to make their implementations the standard. In this case, Webkit is already being followed closely by Mozilla and Opera too plans to be more progressive with Presto 2.3 — good for them.

When the W3C can see commonality in various browser maker implementations, then it is on it’s way to being a standard, not the other way around.

@Andy Clarke

…CSS Working Group is not an innovation body, it’s a standards body who’s job it is to standardise browser makers’ implementations of CSS.

I never said the working group was creating these proposals.

When the W3C can see commonality in various browser maker implementations, then it is on it’s way to being a standard, not the other way around.

That’s certainly not true in every case, there have been many proposals that have become candidate recommendations before any other browser have implemented them e.g. The File API.

In the case of CSS transitions & animations these initial proposals have gone through rounds of discussion on the w3c mailing lists to become working drafts. Again before any non webkit based browser has implemented them.

I would appreciate anyone more familiar with the process to weigh in if I am mistaken.

This is fantastic stuff, Tim. Here I am still waiting with bated breath for css text-shadows to be cross-browser visible, and this is like another present under the tree. Can’t wait for that cross-browser Christmas to arrive!

I’m sure that CSS animations are great for creating some slick effects, but I don’t like the idea of managing that stuff in CSS at all. The most important thing for future webdevelopment should be creating clearer concepts of separating content from styling and data from structure. Why merge something completely new into all this and mess it all up? It would be gorgeous if CSS contained things like animation states and would be more flexible, but the actual transitions should be part of JavaScript coding. Why not push forward a standard interpretation of JS, instead of juggling with this new experimental stuff?!
Don’t get me wrong, I think CSS animations are great, but I think it’s going in the wrong direction.

@Todd Austin & Dan: I’m also getting the faint line although is flashes up only about 20% of the time. I’m using Chrome on Linux.

Cool stuff nonetheless.

Great article! I am completely loving webkit css animations – I just released a new version of my site with a wonderful Star Trek: TNG style warp effect in it. Subtle use like this makes me very happy.

The only downside I’ve found so far is the CPU usage requirements – open a page with webkit css animations and watch your CPU stats go skyward!

Awesome to see these advanced features of WebKit seeing the light of day!

A few months ago, working on an iPhone web app for a client, we came up with the same technique of using an image mask for a spinner One issue we found (and that I confirmed as a “real” bug with an Apple engineer) that could cause problems in how you’ve implemented it is that some versions of Safari (e.g., the version that ships with iPhone OS 3.0) do not apply the linear timing function when there are only 2 frames to the animation. I wrote this up as a comment on a blog post I wrote back in July

I was waiting for such an article which could have shown how to achieve animations with CSS only.
Now I know how to. Nice article for newbies!

I definitely like CSS animations. However, I also like jelly donuts. Does that make them good for me? Nope.

Using a simple -webkit-transition-duration: 2s property and value and then using :hover pseudo-selector on the element with something like below looks really, really lovely in Safari or Chrome: opacity: 0.6. It’s a smooth transition like you’d expect with the use of JavaScript. It’s great to use that on your site logo.

That is some amazing stuff Tim. Brilliant work.

waits for MBP fan to slow back down

Didn’t have any problem on mine although the space animation loaded up quite jerkily.

Um, what’s the point of using some CSS tricks that less than 8% of users can see/use?

It’s this sort of attitude which I believe will save these sorts of techniques reaching the same level of abuse as animated GIFs and marquee and blink tags. The people likely to abuse such techniques will probably be disappointed that it doesn’t work properly in IE and not bother.

I see the benefit lying in giving the user some highly visual feedback when they interact with specific page elements.

It’s this aspect which makes me wonder whether animations belong in CSS or whether they should be restricted to javascript. CSS is for presentation but javascript is for behaviour. Providing visual feedback to user interaction is behaviour.

Awesome article Tim, I’ve been experimenting with simple webkit animations recently and you have spurred me on to investigate further.

Cheers

I think this is an article for the next December, it’s too early to talk about something that may very well change in the next couple of years.

Thanks for the introduction though :)

I agree with steffenbew. While CSS animations may be helpful to some and may help in some situations (iPhone?), I think CSS should just be for style, not behaviour. IE does that kind of thing with HTML Components (HTC), CSS expressions and HTML+TIME. It means more work for the browser developers (and more testing for web developers and possible points of failure), when we have something already – JavaScript.

What next, data storage in CSS? Jonathan Snook rounds it up quite well: http://snook.ca/archives/javascript/css_animations_in_safari/

Still an interesting article though. If only other browsers supported conditional comments, then only those browsers supporting certain CSS would have to load the code.

Wow!
Simply stunning. I just wish Firefox had such goodies. I know it has its Moz Transform but if stuff like this is only available in webkit why don’t they save their energy and develop other areas of the browser and integrate webkit?

The main thing that bothers me is I’d love to start getting ripped into things like this but so much time is spent hacking and working around to get something simple like a border radius to work in even IE8!

I just wish the public felt / knew what they were missing.

The massive campaign undertaken by Google for Chrome (front page of yesterday’s Metro etc.) is the best thing that’s ever happened for web designers in a long time!

While CSS animation is interesting enough for little graphical accents (snow animation and subtle things like that), indeed functional feedback should probably be restricted to JavaScript.

As for the examples, they run way too slow on my machine to have any kind of effect. Even in Safari (4 – Windows) I see a black square being rotated before the animation starts to make any sense. The fallback (graceful degradation) in FF is just horrible (a big black square —- yeah, that makes sense).

CSS animation are not the next best thing. They are nice additions for the future, yet looking at the current state of css coding today there’s still a world of work to do. Standardization, best practices in coding, figuring out the new selectors. If you’re looking to improve the way you write css, there’s plenty of things to work on.

Tim, you’ve excelled yourself. Not only have you shown an über-cool, all-singing, all-dancing example, but you’ve also shown a simple, practical example that would be well-suited to everyday use. And better yet: this article perfectly demonstrates how easy it is to get started with CSS animations.

How sad it is to see so the negative comments from people who are clearly missing the point. As Drew said,

“What we’re doing here is introducing the technology, how it can be used and trying to offer some inspiration. It’s up to you to decide how that may or may not apply to any given project.”

And as for this “I can’t use it because I need my site to look exactly the same across all browsers” attitude… that’s bullshit.

It’s great to see what a modern web browser can now do without Flash.

What I’m finding confusing is the direction CSS is taking. I was always lead to believe that HTML is for markup, CSS for styling and Javascript for Events. The often stated reason for the target attribute being deprecated in HTML is because it’s an event

I just wonder if CSS is the correct place to define animations, transitions etc. This sort of thing (including hover events) seems much more manageable using a scripting language with access to the DOM

Tim, brilliant article ;)
This is exactly what I love 24ways for – the discussion of new and exciting techniques :-) great examples and an excellent write-up :)

Thanks ;)

I agree with what Drew and others (and I myself said in my comment) – this certainly should be in CSS depending on the purpose of the transitions and animations. If we should start putting this in our JS, why not throw out the link states as well? One could easily argue that they, too, should be in the JS layer based on some of the comments here.

I really think people are being quite optimistic about this being available in any other browsers any time soon. I think it will be a while before we can use this kind of stuff all the time and have most people see it, it really is a minority at the moment.

@all: Thanks!
@Ben Bodien: I think we’ll see a switch from jQuery to CSS animations in the next couple of years.
@Eric: That’s where you’ll see the difference between good designers, and great designers.
@Philip Renich: Like I said, it’s like clipping masks in Photoshop. Imagine clipping a black square onto the spinner PNG.
@Todd Austin: Safari on Windows and Chrome on Mac are having some render problems with it it seems.
@Cool Moe D: How can we ever evolve if no one pushes the limits?
@Ryan Seddon: What Andy Clarke said.
@Samual Linde: That’s a great idea, didn’t think of that!
@Jack: “Fun” is the whole reason I wrote this article :)
@Andy Clarke: Thanks for clarifying.
@Steffenbew: In my opinion, everything that is styling belongs in the CSS. JS is for additional functionality.
@Tony Arnold: The more people start using CSS animations, the more browser makers will start looking into performance issues. Have faith :)
@Andrew Hedges: Haven’t seen that bug yet…
@Niels Matthijs: Why so sad? A life without dreams isn’t worth living you know.

Damn you guys are fast commenters!

@Elliot Jay Stocks: Fro-power! ;)
@Howie Wiener: If it’s only a small animation with the purpose of making something look pretty, what’s wrong with using CSS for it? (or, what Drew and Samuel said)

I initially felt that animation should belong in the behaviour layer rather than presentation layer.

Then, after reading Tim’s article I pulled my stick out of the mud and thought fuck it. Why not?

When was the last time you styled a hover state with javascript?

Separating these two out is an artefact of the technologies we have had available for the past decade. We’ve not included animation and transition effects in our CSS because these have not previously been possible.

The web is now a fluid medium that moves in more than 2 dimensions. Design is a key part of this fluidity and by restricting our CSS to static compositions we are – as Tim has so adeptly demonstrated – severely limiting ourselves and the rich, engaging designs we can create in this medium.

Despite the thin line appearing around the box in both Safari and Chrome on my Windows XP based machine, I can see what Tim’s trying to achieve here and like this simple tutorial. This is/may be the future! :)

However, we dont yet live in this future, and when my clients stats tell me that 90% of their visitors use IE (and less than 1% use Chrome and Safari combined), I sigh and we get on with the job. Don’t tell me they should change browsers. Most of them either don’t know what a browser is, or they physically can’t change their browser (automatic updates would have all IE users on version 7/8 by now otherwise).

That said, this site should be and is about looking to the future so keep up the good work. See you there someday.

Really nice article, and given I come from the age old table-based markup days this really blows my mind as to future possibilities… but, I’m also a little bit scared too.

Rather than explain myself, I think I’ll simply quote @PeteWilliams from Twitter who clearly felt exactly as I did after reading this article…

“In awe of @maxvoltar’s superb @24ways article, but am somewhat scared of the potential for a revival of animation-for-animation’s sake!”

Am I right to be a little scared?

I agree with steffenbew and sam. CSS transitions affect how elements behave, not how they are styled. I think you do make an interesting point Drew, but it can be argued that the behavior of a spinner is that it is perpetually rotating. Not an exciting behavior, though behavior nonetheless.

As to the argument for rollovers, I think it’s better to view the pseudo-classes like :hover and :active as states rather than interactions or behaviors. Here, animations are being defined within those states, so they’re really two different things.

<p><a href=“http://24ways.org/2009/css-animations#c003634”>@Tim Van Damme</a> I&#8217;m seeing the render problems on Safari 4.04 Mac.</p>

<p><a href=”<a href=“http://24ways.org/2009/css-animations#c003625”>”>@Elliot Jay Stocks</a> While I agree with you about sites being identical across all browsers (it is bullshit), I have clients that demand it, no matter what I say or how I explain it.</p>

One limitation of this is that you have to define the size of the mask first. You can’t edit it afterwards. So you have all the fantastic customization of colour but are limited to the size of your masking image.

I also agree with steffenbew – animations belong in JavaScript and not in the Stylesheet. If it’s going in the stylesheet it will be very limited what you can do e.g. easing effects when starting and stopping a.s.o. I think controlling animations from CSS is messing things up.

Personally… I think we shouldn’t always let the code/language determine the purpose of whatever it’s representing.

Sure, HTML should define the content and structure of a page, CSS makes it all good and pretty, and JavaScript adds even more bling bling and some Ajax goodness, but like what Drew said, if the animation is purely cosmetic, like for a spinner icon, then CSS animations for it are just fine.

On the other hand, if a block of text will fade out of view and be replaced by another, Ajax-loaded, block of text only when a certain link is clicked, that should be left to JavaScript. Since, without JavaScript enabled, the new content can’t be retrieved, and the fading animation wouldn’t display either. If it were implemented as a CSS transform then the text would fade… into thin air.

On a light note… the spinner example (which was really appropriate given all the Ajax loading effects these days) now leaves me wondering when we’ll start seeing sites that change the cursor to a CSS-animated spinning beachball at random.

Oh, right, we have cursor: wait.

Comments like: “CSS transitions affect how elements behave, not how they are styled” are semantically loaded, because it would be easy to debate the meaning of behavior and styling with regards to client-side web development. Why not presentation and functionality? A case could be made that animations like a progress indicator fit squarely within the presentation realm and should not require the use of a JS library nor tests. The removal of said bit of presentation, while impacting user experience, would not (and should not) impact functionality. My point is that it’s not as cut and dried as it may appear.

I think we’re going to see a transition from Web development to full-fledged application development for mobile and tablet devices in the coming years. And because of the limitations inherent in the Web ecosystem (browsers, standards, etc) decisions must be made about how certain features are implemented. Choices are very limited.

The innovation that’s happening at Apple, Google, and Mozilla should and must move forward. For those of you who think certain features should implemented in Javascript, do some googling on the storied history of ECMAScript 4 and have a look at Crockford’s latest talk on the state of Javascript. Then imagine the future of web application development and place yourself in the shoes of an engineer at one of the aforementioned companies. Given all the restrictions, how would you achieve the goals of replacing iPhone native apps with web-tech versions? How would implement a web-based operating system?

Sam writes:

If only other browsers supported conditional comments, then only those browsers supporting certain CSS would have to load the code.

This is precisely the use-case that Modernizr was created for. So you can define provide CSS for the browsers that support the feature, and then specific CSS for the ones that don’t yet.

All the hand wringing over whether animations belong in CSS is understandable, but I think folks are missing an important point: the visual effects are defined in the CSS, but the behaviors are often (or at least can be) triggered by JavaScript.

It’s a gray area, surely. E.g., you can trigger an animation using the :hover pseudo-selector. But, the way it’s defined at present, you are free to maintain the separation of presentation and behavior if you want.

@Paul, +1 on the recommendation for Modernizr. I only found it last week, but it’s already an indispensable tool in my kit.

I always wonder why people can be negative to things that have yet to be discovered.

You can’t judge things that are still in development. If you bash new ideas, how can there be any inventions?

What IE or other browsers support now, is not important. Important is that what is possible at the moment.

I’m looking forward to the future and I’m not scared.
Designers won’t do the same mistakes again just because the technique will be easier to make them.
We know much more than 10, 15 years ago and won’t do those things again that disturb the users.

New things like CSS animations opens the door to more creativity and new user experiences.

Really great article, Tim!!!

Apple seems to be using something like this for their iPhone User Guide (search for @-webkit-keyframes loadingImageAnimation).

Via John Gruber

Great article on the power of CSS3!

It was easy to follow and understand. I think your Space demonstration is absolutely amazing. My first impression was WOW!!!

I showed a friend of mine who works in IT and his reply was ahhhh Flash… isn’t it great! I laughed and told him, Fuck Flash, that’s dead and buried, this is done using CSS3… he quickly shut up and just looked at me!

This article is one of the best so far in this 2009 series, if not the best to date since 24ways launched!

Nice article, but…

In my everyday job I have to think about ALL users, not only the ones with new shiny browsers. CSS3 may be the future but not for another couple of years.

so are we gonna need more backward compatibility hacks? we cannot build websites that uses technologies that less than 10% using the latest browsers can use.

I really like the idea of doing slick animations with simple css, I find it really inspiring!

Two years passed since this article and your solution is still not supported by FF and IE9, also I’ve got that tiny outline in Safari.

I’ve got another solution for preloaders which is using the HTML canvas element for drawing and animation. It’s called Heartcode CanvasLoader UI Library. It works in every major browser with Canvas support. It’s released under the MIT licence, so it’s totally free to use and share.

Check out the Heartcode CanvasLoader Creator page where you can create, customize and download HTML preloaders for free:

http://heartcode.robertpataki.com/canvasloader

I really hope you will like and use it.

Keep up with the cool stuff,

Today I used this information to create a common loading overlay for web apps:
https://gist.github.com/tracend/8553152

Thanks!

Thanks you for theses tips. I started to develop by my self since 2 years and its with people like you i can do a complete website now. Thanks again!