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.
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.
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.
@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?
: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