Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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?

share|improve this question
    
By animations, you mean transitions? –  rsman Nov 3 '12 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 '12 at 17:31
    
@RajSekharan yes –  Joseph the Dreamer Nov 3 '12 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 '12 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 '12 at 18:03

1 Answer 1

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.

share|improve this answer
    
Possible counterargument to reason #1 - css-tricks.com/myth-busting-css-animations-vs-javascript –  Luke Mar 11 at 17:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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