When is it best to use CSS for an animation, and when is it best to use JavaScript? How do you choose?

Short answer

If you can animate it in CSS (transitions or keyframes), then do it there. The browser will always be able to optimize it better, rather than asking your javascript every 16ms what it should do.

Long Answer

People want performance

JAVASCRIPT Animations

Runs on one thread along with other JS, style calculations, layout, and painting

Chance to miss to a frame

-

JS

Style/Layout

Paint

Composite

More control

play(), pause(), reverse() and restart(), on scroll

+

Css Animations

Lacks expressive control of JavaScript

Limited in complexity of animations

-

The browser is able optimize more

Hardware acceleration

a.k.a., “Here you go, GPU”

+

Hardware acceleration? How?

JS

Style/Layout

Paint

Composite

Style / Layout

Paint Storm Triggers

Paint

height

width

padding

font-size

etc.

background

color

border-radius

visibility

etc.

JS

Style/Layout

Paint

Composite

Transform

Safe Properties

Opacity

rotate()

scale()

translate()

opacity: 0...1

CSS transition vs requestAnimationFrame?

If you need the control of JavaScript (stop, start, on scroll), 

best to use requestAnimationFrame

Before, After

How can we leverage animations to make our digital products more human-centric? What are some examples that succeed at this?

Functional

Two kinds of UI Animations

Presentational

Improve usability

Clarify use

Personality

Joy and delight

Reinforce a feeling

Photo Zoom

Transitions vs Keyframes?

Transition has two keyframes

.button {
    color: #1b2794;
}

.button:hover {
    color: #ff5b5a;
}

Keyframes can have ∞*

@keyframes bounce {

    from { ... }

    to { ... }

}

* as much memory as your computer can handle

@keyframes bounce {

    0% { ... }

    10% { ... }

    77% { ... }

    100% { ... }

}

New ground: SVG