8 Replies - 962 Views - Last Post: 25 May 2012 - 01:08 AM

Poll: Animation in CSS (6 member(s) have cast votes)

Does animation belong in CSS?

  1. Yes (1 votes [16.67%] - View)

    Percentage of vote: 16.67%

  2. No (4 votes [66.67%] - View)

    Percentage of vote: 66.67%

  3. Maybe durations or other settings/stylings, but the animation itself should still be managed by javascript (1 votes [16.67%] - View)

    Percentage of vote: 16.67%

  4. I don't care either way (0 votes [0.00%])

    Percentage of vote: 0.00%

Vote Guests cannot vote

#1 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Does animation belong in CSS?

Posted 21 May 2012 - 03:29 PM

I watched a cool presentation of a CSS only timer: See it here

I began a discussion on twitter where I stated that it feels like CSS is beginning to become what HTML was when CSS was first created. What I mean by that is HTML was trying to manage content and style and someone realized that they should be split. Now with animation controls being possible from within CSS it feels as though CSS is beginning to forget why it exists. Now one could argue, that they are still styles, but not necessarily graphical styles but animation styles (as @snookca stated). And while this is true - it still feels as though this is where Javascript should do the heavy work, as CSS is also actually running the animation (this script also handles onclick events and the start/stop of animation).

I am not quite sure where I stand on this, as I like making things easier with less code, but at the same time I don't want to see CSS begin to try and do too much than what it was intially intended for.

Just thought I would ask the DIC community to see what you guys think.

This post has been edited by gregwhitworth: 21 May 2012 - 03:32 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Does animation belong in CSS?

#2 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 561
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: Does animation belong in CSS?

Posted 21 May 2012 - 04:33 PM

I think this is only available in css3 though. There was, and still is, that big discussion about how html5 and css3 will make flash redundent. Not sure how true that is, but it is talked about. I personally dont like css3 going down this route. Whenever I create a website, I like to have html control the content, css control the styling, and javascript control the animation. With this new stuff offered in css3, its like their mixing styling with animation. Some people may not think this is a bad thing, but css was introduced to remove style based code from html files. No doubt they achieved this, but now they seem to be mixing it again with code javascript or another language should handle. Its one of these things though, by doing it they are making css3 more powerful and moving it into the future. Some people will agree with their decissions, others wont.

Do you know if there is an api for all the new stuff, cant seem to find one?
Was This Post Helpful? 2
  • +
  • -

#3 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4308
  • View blog
  • Posts: 12,088
  • Joined: 18-April 07

Re: Does animation belong in CSS?

Posted 21 May 2012 - 04:37 PM

I think they should hold off a bit on CSS progress until all the browsers can catch up and get on the same playing field. None of these lame vendor prefixes and having IE lag behind.

Once they are on the same playing field, then progress without animation in CSS. Leave behavior up to scripting. CSS should just be styling.

:)
Was This Post Helpful? 1
  • +
  • -

#4 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 789
  • View blog
  • Posts: 1,676
  • Joined: 30-January 09

Re: Does animation belong in CSS?

Posted 21 May 2012 - 06:20 PM

I agree with the previous two posters. CSS should be for styling alone. I'm a bit of a purist here, and draw a distinct line between certain CSS capabilities. For instance, I'll use :selected, since it styling for a selector, but I won't use :hover as that is essentially event-driven.

I don't think animation should reside in CSS. As Martyr2 said, the various browsers are not up to speed with CSS3 yet (in some cases, CSS2), and the ever-increasing amount of prefixes (not to mention syntax) for simple things such as border-radius, are making life hard as it is. Incorporating animation into CSS crosses the line where CSS supposedly ends, creates a bigger environment for browsers (read: IE) to screw up, and will inevitably slow down overall progress. My two cents says so anyhow :)
Was This Post Helpful? 1
  • +
  • -

#5 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: Does animation belong in CSS?

Posted 21 May 2012 - 06:52 PM

Yea, I'm going to have to agree with that as well. Using CSS animations like that is crossing the line into Javascript territory.

Although, I wouldn't mind some limited animation abilities in CSS, when it's effects are purely aesthetics -- like smoothly animating color changes between button states, for example -- but as soon as people start using it to control the behavior of the site, like in that stopwatch example, that should be Javascript.


As to that stopwatch demo. Even though the thinking behind it was kind of cool, it can hardly be counted as "purely" CSS based. I mean, CSS has no concept of events, so in order to create the buttons to control it the author had to "abuse" the built-in event mechanism for the HTML radio inputs and labels. It's sort of a dirty hack to get around having to use Javascript to deal with the events; misrepresenting labels as controls, while hiding the actual controls from view. - Pretty much any decent Javascript equivalent to that would be far more elegant, in my opinion.
Was This Post Helpful? 2
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: Does animation belong in CSS?

Posted 21 May 2012 - 08:05 PM

View PostMartyr2, on 21 May 2012 - 11:37 PM, said:

I think they should hold off a bit on CSS progress until all the browsers can catch up and get on the same playing field. None of these lame vendor prefixes and having IE lag behind.

That's kind of dangerous thinking, though. If Microsoft has proven anything, it's that if we hold of on advancing the standards until everybody is caught up, we'd still be stuck in the IE6 era. Granted, things work a bit differently now that IE doesn't dominate the market, but I do think the same principle should apply.
Was This Post Helpful? 0
  • +
  • -

#7 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Does animation belong in CSS?

Posted 22 May 2012 - 12:24 AM

Exactly, that was my thought, that CSS is trying to become something it never was intended to be. Even when I see people use :before to add content I at times think that that in itself is a misuse. I also can see this making it confusing for other devs to work on a project, because most users will think that the animation is done in the javascript not the CSS. And while that will change over time if this stays implemented in CSS3 I still like things being compartmentalized. I guess we'll have to wait and see.
Was This Post Helpful? 0
  • +
  • -

#8 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Re: Does animation belong in CSS?

Posted 22 May 2012 - 08:25 AM

Yes I would say CSS should have the animations/transitions etc. These are still styling, just most advanced than background colour. I am not terribly keen when counters are used in css (although I do want variables asap) since to me counters are logic.

HTML - Structure
CSS - Styling
Javascript - Logic

That works. Javascript is fairly cumbersome for some tasks such as adding a transition to anchors and I do not think we need a new language for animations. If you want them separate, make an animations.css file.
Was This Post Helpful? 0
  • +
  • -

#9 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 789
  • View blog
  • Posts: 1,676
  • Joined: 30-January 09

Re: Does animation belong in CSS?

Posted 25 May 2012 - 01:08 AM

Hmm, I'm gonna re-post here.

I don't think event-driven styling should be in CSS. But, I have used :hover, and now that I've discovered transition-duration (and the other transition attributes), I'm converted.

I believe it is a bad blurring of the lines between CSS and JS, but my application serves up conditional CSS, to allow users to upload and utilise custom skins. If I were to keep the hover animation in JS, it would create a headache of overhead for the application and developers, as any changes to the generic skin style placeholders would have to be done in both a CSS file and a JS file, not to mention unnecessary clogging of the preg_replace array for templates. If I stay with JS hovers, it's code problems waiting to happen.

Sorry Atli and Martyr2, I have joined the dark side :batman: (closest smiley I could find that looked like Darth Hudson).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1