Grow your CSS skills. Land your dream job.

CSS animations — will they replace JS?

  • GMB
    # September 4, 2012 at 1:03 am

    Gotta say that I’m really impressed with many of the CSS animations on CodePen and am wondering if those in the know here see it taking more and more of the animation pie away from JS? I’d be curious to know why or why not.

    # September 4, 2012 at 1:08 am

    It really depends on the scope of the animation. I’m a firm believer in separating content, presentation and interaction (HTML, CSS and JS), so if it is just a little animation that compliments the styling, then use CSS, but if it is interactive, then JS is probably the way to go.

    With that being said, I have certainly done interactive animations on CodePen using CSS, but that was more as a showcase, and generally using techniques I wouldn’t recommend for production.

    # September 4, 2012 at 1:58 am

    I’m not 100% sure what I think of this yet, but JS has replaced what flash used to do and CSS is slowly replacing aspects of JS. I agree with josh but there’s nothing that stops you from creating an ‘interactive.css’ file. Having functionality working with out depending on js in certain situations would be great (tabs, accordions, etc) but obviously with some kind of fallback.

    # September 4, 2012 at 2:06 am

    @jamy_za The main issue for me is that in many of those cases we are using CSS ‘tricks’, such as the checkbox hack, which are pretty poor semantically.

    # September 4, 2012 at 5:38 am

    If no mistake, CSS animations are heavy. Way heavier than JS animations.

    # September 4, 2012 at 6:18 am

    @joshuanhibbert yeah agreed, to be honest I’ve never looked at the various checkbox hack articles. I get the idea of how it works and I’m not interested in any way. We could create CSS tabs with #target and have e.preventDefault() in js?

    Semantics come first :p

    # September 4, 2012 at 6:27 am

    @jamy_za I do like :target quite a bit, but it can perform poorly in some situations (i.e. repeating clicking, toggling).

    # September 4, 2012 at 9:48 am

    :target was an example.
    :active, :hover, :focus, :target, :enabled, :disabled, :checked still exist :p

    Separating interactivity from presentation doesn’t mean “Keep interactivity with JS and presentation with CSS”. It means don’t mix interactivity with presentation. I see it like separating code, such as MV* frameworks. I’ll use which ever language is best for the job, which happens to be mostly JS for interactivity at the moment (due to browser compatibility) and completely CSS for presentation :p

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".