5

Like what the title says, why are there animations in CSS3?

With basis from the "rule" of separation of concerns, HTML is the content, CSS is the style, and JavaScript is the interactive component. And by interactivity, one can conclude that anything moving due to any interaction, user or non-user triggered should be covered by JavaScript, not CSS.

So why did they make CSS3 capable of doing animations? Doesn't it breach the rule, which is separation of concerns? Is there anything I missed that makes animations qualified to be classified as styles rather than interaction?

Improve this question
5
  • By animations, you mean transitions?
    – rsman
    Nov 3, 2012 at 17:29
  • 3
    I'd hardly say simple fade ins and transitions are "interactivity"...plus I'm quite content not to have to load jQuery just to change link color with a fade-in...
    – Ben Brocka
    Nov 3, 2012 at 17:31
  • @RajSekharan yes
    – Joseph
    Nov 3, 2012 at 17:31
  • And why couldn't animations be style? Animations are not the same as interactions. Interactions require a second party (user). Animations do not. So separation of concerns is not violated.
    – Marjan Venema
    Nov 3, 2012 at 17:51
  • What goes into the CSS spec is not what will bring separation of concerns between presentation and mark up. It is more of a afterthought - standardization of what existing browsers have already implemented and seems to have started to see high usage. The -webkit- and -moz- prefixed style rules for example.
    – rsman
    Nov 3, 2012 at 18:03

1 Answer 1

Reset to default
8

There are two reasons:

  1. If an animation can be standardized and handled natively by the browser's rendering engine, it's way cheaper (performance wise) than doing it in JavaScript.
  2. As mentioned in the comments, the animations/transitions are mainly about style, not so much behavior (at least the set that's covered by CSS functionality), so it's not such a huge deal with respect to seperation of concerns.

Seperation of concerns is nice, but putting animations in CSS makes more sense than putting it into HTML, and is more performant than doing it in JavaScript (you could as JS apis, but CSS does graceful fallback a whole lot better.

Improve this answer
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.