CSS3 animations considered harmful

There's been a lot of talking about the new improved features of CSS3 animations, currently supported only by the latest versions of Webkit browsers. I think that most people who endorse these features miss one key point: separation of presentation and behavior. CSS is designed to handle the presentation of web documents, not their behavior. Behavior is something that only JavaScript can correctly handle in a web browser. If we mix up presentation and behavior, we'll probably end up with generating a big confusion between the two layers. Further, CSS is designed to be a simple, human-friendly stylesheet language whereas animations are more inclined to be something that can be actually generated and processed by a programming language (and CSS is not a programming language).

CSS3 animations force browsers to perform complicate calculations using CSS properties as a means to get particular effects: moving, resizing, translating, calculating Bezier curves, calculating time delays and much more. Honestly, this seems more JavaScript than CSS to me! I keep using JavaScript for such things, honoring a separation between presentation and behavior that most developers now are trying to forget in order to jump on the bandwagon of CSS3 animations or, more clearly, on the bandwagon of spaghetti code that they call "web 2.0 latest and coolest features".

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

7 thoughts on “CSS3 animations considered harmful”

  1. I think it depends somewhat on how the CSS-based animations are used/applied. If these animations are strictly cosmetic and have no bearing on content or function, then I think doing it in CSS is perfectly acceptable. This is presentation, after-all. If, on the other hand, these animations impact how content is accessed or interacted with, then perhaps javascript is the better way to go.

    Personally, I feel javascript falls in a peculiar spot between content, behavior and presentation. It can be used be used in all cases and the separation is not always clear. For example, injecting content into a page using AJAX while fading that new content in would qualify as content layer, behavior layer, and presentation layer all at once. While it's great to strive for a separation between all the layers, there are always edge cases and in the end, you should use and apply the tools available to you in a way that serves you best, regardless of what the guidelines say.

  2. CSS should stay simple not complicated, animation is wrong in the terms of browser support, code simplicity and we don't need another huge language.
    I use jQuery and Flash for animation, depends upon complexity of project and client requirements.
    CSS as every language, even spoken language has to evaluate and probably animations will become part of it, but how many people will use it....we will see in couple of years

  3. I see where your coming from, but I too can see where animation would be purely presentation. Take the use case of CSS menus.

    Hover over an item, and a submenu appears. Great! But wouldn't it be great to be able to make it appear with a fade or a wipe instead? Less jarring, a better user experience, and still presentational, at least in my mind.

    I think that's what the designers were imagining with CSS transitions and animations.

  4. 1. I agree that CSS is not a programming language - it is just a set of parameters, there are no "constructs" (if/when etc)

    2. As others have said, there are blurred edges between presentation and behavior. It is hard, and probably wrong to draw hard lines between these two layers.

    3. Rather than argue whether something should be CSS or JS, we should look to the core of the argument - why do we separate out the layers in the first place? There are many reasons, some of them include: to make documents more maintainable, more efficient, more future proof etc.

    So, the key questions when developing should probably be "in this case (it is a decision that should be made of a case-by-case basis), will CSS or JS give me the best performance (page speed, rendering speed, smoothness of animation etc), more stability across browsers, produce the most efficient code (less code for page speed, writing etc), easiest to maintain, is likely to be future proof (you wont look back in 12 months and curse your decision).

    Just my 2 cents...


Leave a Reply

Note: Only a member of this blog may post a comment.