CSS Animation & Transitions

+

-

loading animations
:hover, :focus; :active, :target
state transitions
reusable keyframes
adaption in media queries
great performance

limited events
not dynamic *
no able to separate transform properties *
not great for complex animations / timelines

CSS Transitions

.foo {
    transition: <property> <duration> <timing-function> <delay>;
}

cssreference.io/transitions/

CSS

CSS Transitions

.color-delay {
  color: black;
  transition-property: color;
  transition-duration: 3s;
  transition-timing-function: ease-in-out;
  transition-delay: 2s;
}

.color-delay {
  color: black;
  transition: color 3s ease-in-out 2s;
}

.color-delay:hover {
  color: teal;
}

CSS

CSS Transitions

.color-delay {
  color: black;
  transition-property: color;
  transition-duration: 3s;
  transition-timing-function: ease-in-out;
  transition-delay: 2s;
}

.color-delay {
  color: black;
}

.color-delay:hover {
  color: teal;
  transition: color 3s ease-in-out 2s;
}

CSS

don't define it here

CSS Transitions

.color-delay {
  color: black;
  transition-property: color;
  transition-duration: 3s;
  transition-timing-function: ease-in-out;
  transition-delay: 2s;
}

.color-delay {
  color: black;
  transition: color 3s ease-in-out 2s;
}

.color-delay:hover {
  color: teal;
}

CSS

always define it in the default state

CSS Transitions

great for small interactions
use on single state transitions like :hover, :focus, :active
not all properties can be transitioned, e.g. display
developer.mozilla.org/enUS/docs/Web/CSS/CSS_animated_properties

CSS Animations

CSS Animation

looping
several states in the animation
more control & options than transitions
e.g. loading spinners, icon animation, more complex :hover behaviours

CSS Animation

keyframes: stages & style of the animation
animation property: how it's animated (e.g. speed, delay, ..)

consists of:

CSS Keyframes

@keyframes fadeInOut {
  0% {
   opacity: 0;
 }
  50% {
   opacity: 1;
 }
 100% {
   opacity: 0;
 }
}

.foo {
  opacity: 0;
  animation: fadeInOut 2s;
}

@keyframes fadeInOut {
  50% {
   opacity: 1;
 }
}

@keyframes fadeOut {
 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }
}

CSS

CSS Animation Property

.foo {
    animation: <name> <duration> <timing-function> <delay> 
                <iteration-count> <direction> <fill-mode> <play-state>;
}

.foo {
    animation: bounce 3s linear .2s infinite alternate forwards paused;
}

cssreference.io/animations/

CSS

Multiple Animations

.foo {
    animation: slideIn 2s, fadeIn 1.75s;
}

CSS

CSS Summary

Transitions

single state changes
:hover, :focus; :active, :target
e.g. buttons, links, etc

Animation

looping
several states in the animation
more control & options than transitions
e.g. loading spinners, icon animation

use for

animated interaction
simple animations
good performance without external resources / JS blocking

not ideal for

timelines and chaining of multiply animations (more than 4)
if the animation needs to change dynamically on runtime
if you need physics or complex easings

CSS Summary

SVG + CSS Animation = 🤨

SVG & CSS

SVG & GSAP = ❤️

Performance

The Transform Property

4 things the browser can animate cheaply

position - transform: translate(...);
scale - transform: scale(..);
rotation - transform: rotate(..);
opacity - opacity: 0;

.foo {
    transform: translateX(-20px);
}

CSS

The Transform Property

            translateX(-20px)

            rotate(25deg)

            scale(0.5)

            skewY(-20deg)

rotateX(50deg)

cssreference.io/property/transform/

Transform Origin Property

.foo {
    transform-origin: 100% 50%;
}

Position for where the transform should origin
Default is 50% 50%

CSS

cssreference.io/property/transform-origin/

Transform Origin

What happens when we change something?

Javascript

Recalculate Styles

Layout

Paint

Composite

1 frame

What happens when we change something?

Javascript

Recalculate Styles

Layout

Paint

Composite

width, margin-top, left

Layout

What happens when we change something?

Javascript

Recalculate Styles

Layout

Paint

Composite

background, shadow, outline

Paint

What happens when we change something?

Javascript

Recalculate Styles

Layout

Paint

Composite

transform, opacity

Composite

What should we animate?

csstriggers.com/

What creates new layers?

3D transforms
animated 2d transforms
being on top of a compositing layer
accelerated CSS filters
will-change property

! Every layer consumes memory !

Creating a new layer

@mixin accelerate($name) {
 will-change: $name;
 transform: translateZ(0);
 backface-visibility: hidden;
 perspective: 1000px;
}

.foo {
  @include accelerate(transform);
}

SCSS

how to use will-change

don't optimize too many elements
use it only if the change will happen constantly
remove it once the animation finished
not supported in IE, Edge, Safari (use translate3d or translateZ instead)

requestAnimationFrame

a function that the browser can optimize it, so animations will be smoother
animations in inactive tabs will stop, allowing the CPU to chill
more battery-friendly
you don't need it if you're using the Web Animations API, Greensock
cancelAnimationFrame to end function calling

requestAnimationFrame

function repeatOften() {
  // Animate something
  requestAnimationFrame(repeatOften);
}

requestAnimationFrame(repeatOften);

JS

Summary Performance

animate only transform & opacity if possible
use will-change, requestAnimationFrame where needed
don't create too many layers
animate elements on the top layers
inspect & test your animations in the devtools

Summary Performance

animate only transform & opacity if possible
use will-change, requestAnimationFrame where needed
don't create too many layers
animate elements on the top layers
inspect & test your animations in the devtools

CSS Custom Properties

aka. CSS Variables

CSS Variables in CSS

:root {
  --my-color: crimson;
}

CSS

button {
  background-color: var(--my-color, red);
}

button.special {
  --my-color: teal;
}

CSS Variables in JS

const element = document.querySelector('.foo');

element.style
  .setProperty('--my-color', 'orange');


element.style
  .getPropertyValue('--my-color'); // => 'orange'

element.style
  .removeProperty('--my-color');

JS

Scope & Inheritance

:root {
    --primary: #f60;
}

.foo {
    color: var(--primary, orange);  
}

global

.foo {
    --primary: #f60;
    color: var(--primary, orange);
}

local

CSS variables are inheritable

cause style recalculation when changed on parent
change variables at most specific level!

CSS

Browser Support

Why use variables for animation?

easily debuggable
no excessive DOM manipulation
DOM node independent
locally adaptable
Transform: Individual Properties

.foo {
    transform: translateX(var(--x)) rotate(var(--rotation));
}

CSS

CSS Variables + JS Events = 💯

JS Events Before

const foo = document.querySelector('.foo');

document.addEventListener('mousemove', (e) => {
  foo.style.transform = `
    translateX(${e.clientX}px)
    translateY(${e.clientY}px)
  `;
});

JS

CSS Variables + JS Events

const root = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
  root.setProperty('--mouse-x', x);
  root.setProperty('--mouse-y', y);
});

.foo {
  transform:
    translateX(calc(var(--mouse-x) * 1px))
    translateY(calc(var(--mouse-y) * 1px));
}

JS

CSS

CSS Variables Summary

use for

dynamic changes
CSS changes in combination with JS Events
theming
individual transforms
reactive animations

not ideal for

complex animations, timelines
static values
control / callbacks
not possible to change in @keyframes

Web

Animations

API

Web Animations API

animating completely in JS
more control for animations
ideal for dynamic, reactive animation
in combination with JS Events
controls & callbacks
grouping & timing

Web Animations API

keyframes object / array: stages of the animation
timing object: how it's animated (e.g. speed, delay, ..)

consists of:


    el.animate(<keyframes>, <timing object>);

WAAPI Keyframes

2 options

{
  opacity: [ 0, 1 ],          // [ from, to ]
  color:   [ "#fff", "#000" ] // [ from, to ]
}

[ 
  { // from
    opacity: 0,
    color: "#fff"
  }, 
  { // to
    opacity: 1,
    color: "#000"
  }
]

object

array

JS

WAAPI Timing Object

{
    duration: 2000, // milliseconds
    iterations: 1, // or Infinity
    direction: 'normal', // 'alternate', 'reverse', 'alternate-reverse'
    fill: 'forwards', // 'backwards', 'both', 'none', 'auto'
    delay: 0, // milliseconds
    endDelay: 0, // milliseconds
    easing: 'linear', // 'ease', 'ease-in-out', 'ease-in', ...
 }

JS

.animate()

const foo = document.querySelector(".foo");

foo.animate(<keyframes array>, <timings object>);

JS

.animate()

const foo = document.querySelector(".foo");

foo.animate([
    { transform: 'scale(0)', opacity: 0 },
    { transform: 'scale(1)', opacity: 1 },
  ], {
    duration: 2000, 
    easing: 'ease-in-out', 
    iterations: 1, 
    direction: 'normal', 
    fill: 'forwards' 
  }
);

JS

controls

const animation = element.animate(/* animation */);
console.log(animation.playState); //"running"

animation.pause(); //"paused"
animation.play();  //"running"
animation.cancel(); //"idle"... jump to original state
animation.finish(); //"finished"...jump to end state
animation.reverse(); // play animation in reverse

animation.playbackRate = 1.5; // play faster

callbacks

const animation = element.animate(/* animation */);

animation.onfinish = function() {
  console.log("Animation finished");
};

// remove element from DOM
animation.oncancel = animation.effect.target.remove();

.animate()

const keyframes = [
    { transform: 'translateY(0%)', easing: 'ease-in', offset: 0 },
    { transform: 'translateY(500%)', easing: 'ease-out', offset: .33 },
    { transform: 'translateY(420%)', easing: 'ease-in', offset: .5 },
    { transform: 'translateY(500%)', easing: 'ease-out', offset: .66 },
    { transform: 'translateY(460%)', easing: 'ease-in', offset: .82 },
    { transform: 'translateY(500%)', easing: 'ease-out', offset: .92 },
    { transform: 'translateY(480%)', easing: 'ease-in', offset: .97 },
    { transform: 'translateY(500%)', easing: 'ease-out', offset: 1 },
];

const timing = {
    duration: 2000,
    iterations: 1, 
    direction: 'normal', 
    fill: 'forwards',
    delay: 0, 
    endDelay: 0,
    easing: 'linear', 
};

const apple = document.querySelector(".apple");
const animation = apple.animate(keyframes, timing);

.animate()

tree.addEventListener('click', () => {
    animation.currentTime = 0;
    animation.play();
});

apple.addEventListener('click', () => {
    animation.playbackRate += 0.2;
});

CSS

vs

WAAPI

CSS

WAAPI

CSS

WAAPI

defined beforehand
static animations
:hover, :focus
declarative
simplicity
no JS blocking

sequencing
controls & callbacks
document.timeline
hardware acceleration
it's going to be native aswell
more control than pure CSS

cross-browser compatiblity & SVG

browser renderer & optimization

native animation vs external library

WAAPI vs Libraries

small size vs. fancy plugins

101 to

Native Web Animation

CSS Animation

Performance

CSS Custom Properties

Web Animations API

CSS Transitions

Pick 2!

CSS Animation & Transitions

CSS Animation & Transitions

+

-

CSS Transitions

CSS Transitions

CSS Transitions

CSS Transitions

CSS Transitions

CSS Transitions

CSS Animations

CSS Animation

CSS Animation

consists of:

CSS Keyframes

CSS Animation Property

Multiple Animations

CSS Summary

Transitions

Animation

use for

not ideal for

CSS Summary

SVG + CSS Animation = 🤨

SVG & CSS

SVG & GSAP = ❤️

Performance

The Transform Property

The Transform Property

Transform Origin Property

Transform Origin

What happens when we change something?

What happens when we change something?

Layout

What happens when we change something?

Paint

What happens when we change something?

Composite

What should we animate?

What creates new layers?

Creating a new layer

how to use will-change

requestAnimationFrame

requestAnimationFrame

Summary Performance

Summary Performance

CSS Custom Properties

aka. CSS Variables

CSS Variables in CSS

CSS Variables in JS

Scope & Inheritance

Browser Support

Why use variables for animation?

CSS Variables + JS Events = 💯

JS Events Before

CSS Variables + JS Events

CSS Variables Summary

use for

not ideal for

Web

Animations

API

Web Animations API

Web Animations API

consists of:

WAAPI Keyframes

2 options

object

array

WAAPI Timing Object

.animate()

.animate()