Definitely CSS triggered by a toggle class when possible. I feel it's the smoothest and gives you the best experience. When CSS can't do the trick, I fallback to JS.

I am always inspired by Codrops' CSS animation demos. Mary Lou is a magician with this stuff! http://tympanus.net/codrops/category/playground/

CSS to animate, JS to toggle animations (in most cases)

To learn it, I would suggest grabbing animate.css from Daniel Eden and just playing around while reading the source.

Easy way to get an understanding of more robust animations, keyframes, etc.

Velocity.js for JS based animation. Works back to IE8 and Android 2.3, and it's blazing fast while offering a ridiculous amount of features in a small package: http://VelocityJS.org.

I may or may not be biased.

I've switched all my animation workflow to Velocity. That's the most maintainable solution for large scale app UI. It's performance is amazing also, faster then Transit and regular CSS transitions. http://julian.com/research/velocity/ and http://css-tricks.com/improving-ui-animation-workflow-velocity-js/

CSS Transitions are incredible; Transitions handle the majority of my animation needs, and they naturally handle bi-directional animations.

CSS Keyframes offer a little more control, but are a little hard to wrangle for more complex/specific animations. They also take a little wizardry to get bi-directional animation the way you want.

JavaScript Animation Libraries appear fantastic. I’ve been looking at Greensock (and similar libraries) a lot lately, as they claim (and rightly appear) to be faster than CSS-powered animation… but I would likely take this approach for animations that require specific timing and more complex choreography (perhaps fancy UI view/state transitions…)

I use JS to toggle a "visible" class when an object scrolls into a user's view, then CSS to animate an object.

I am a big fan of Greensock for creating a more advanced timelines and tweens. CSS3 animations can also be very handy for some simple but elegant effects.

These guides might help you to get started with both CSS and JavaScript animation libraries:

• The Guide to CSS animations for the web
• The Guide to JavaScript animations for the web
• The Guide to Scrolling Animation Libraries

Also, don't forget to Hardware Accelerate those CSS Animations (use translate3d as opposed to translate) to get super crisp animations on mobile devices.

When animating stuff, what I am looking for is the balance between performance and ease to maintain.

I use CSS animation if: 1. The animation is triggered by hover. 2. The animation properties are rotate, scale, transform, opacity, and color/background-color.

Other than that I prefer to use Velocity.js.

I use CSS for transitions and animations. The application I develop for uses AngularJS, so I use its classes, e.g., ng-enter and ng-leave, as needed for triggers when CSS alone won't work.

I use LESS for CSS and have made a number of mixins for commonly used transitions and animations. Some of those, specifically animations with keyframes are custom, for others I have used pre-made animations from Animate.CSS

I recently discovered AniJS. It has a simple declarative syntax using the "data" attribute. It makes it relatively simple to create complex animation events that likely wouldn't be possible with CSS alone. The only discouraging thing for me about AniJS, is that its logic is inline. That could potentially become a maintenance issue or create unexpected results when events trigger multiple animations on a page at once. Regardless it's fun to play with and I recommend checking it out for prototyping if nothing else.

I use jQuery Transit for a lot of stuff. It allows you to use the jQuery animation api but uses CSS animations to power them.

It also conveniently allows you to use numbers in your CSS values, like this:

CSS to animate and JS to toggle animations.

I typically like to use CSS for the actual animations because it really is much faster, but I use JS when I need more than hover, active, or focus states.

This is a really cool, simple to use library that sets up a bunch of animations. I've found it really helpful for a number of projects.

http://daneden.github.io/animate.css/

CSS wherever possible.

Flash

I'm using Animate.css

Do you use CSS or JS for animations/transitions?

Yes.

They're tools, and I use them both. And together. Pretty much as others mentioned, plus the fact that in some cases CSS will do, and in others JS is required.

Same with the rest. CSS for transitions and animations. Then JS to initialize these animations if needed. Animate.css is one resource and then prototyping in CodePen to test.

It really depends. I generally go prefer CSS animations since they are rendered natively in the browser (C++ runs faster than V8 Javascript). However, sometimes there are cases where you want to mux in javascript for selector/scroll/waypoint reasons.

Ultimately, CSS renders faster in browsers. JS serves a nice toolkit when CSS spec can't get the job done.