animation-presentation

CSSTransition

CSSTransition

Using CSS transitions

Syntax

Shorthand

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

Multiple Animations

timing-function

MDN

ease

cubic-bezier

Cheat Sheet

Easing Functions Cheat Sheet

steps

Example

transitionend

Element.addEventListener('transitionend', function (e) {
	// Do something after a transition ends...
});

Example

transitionend note

Workaround:
var handler = function () {
	// Do something after transition finishes...
	Element.removeEventListener('transitionend', handler);
	window.clearTimeout(timeoutFunction);
};

Element.addEventListener('transitionend', handler);

var timeoutFunction = setTimeout(handler, 2000); // A timestamp that is slightly longer than the transition duration

Practice

Insert a CSSTransition in the transitionend example.

Practice

In the transitionend example above, when the transition ends create a new div with the same css transistion.

CSSAnimation

CSSAnimation

Shorthand

animation: [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state] [name];

keyframes

animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse;

animation-fill-mode

animation-fill-mode: none | forwards | backwards | both;

CSSAnimation animation-play-state

animation-play-state: running | paused;

Multiple CSSAnimations

CSSAnimation Events

Element.addEventListener("animationstart", listener);
Element.addEventListener("animationend", listener);
Element.addEventListener("animationiteration", listener);

Practice

Fork the 1st CSSAnimation example, 1) add a rotation animation and 2) show the animation elapsed time at every iteration on the screen.

Fork the animation-play-state example, revise the pause button to enable resuming the animation.

Practice

Create an fullscreen element and slide it in from left. When the animation ends, zoom out and fade out the element.

Differences, in general

• CSSAnimation:
• Flexible keyframe definition
• Easy looping and playback control
• Need to be predefined and is harder to change animation in the middle

Differences, in general

• CSSTransition:
• Not as flexible as keyframe animation
• No easy playback control
• Easy to interpolate a transition with another

JS Animation

For complex animations with fine-grained control, physics, separate timelines etc.

requestAnimationFrame

Revise with elapsed time

Easing

Look up easing functions

Practice

Fork the previous example, after the bounce animation finishes move the box back to the start position with another kind of easing.

JS Animation Libraries

Velocity.js

GSAP

Rendering Pipeline

• Layout
• Paint
• Composite

Performance considerations

Limit your animations to:

• translate
• rotate
• scale
• opacity

Good Reads

Learn browser rendering concept:

How to make high performance animations:

Look up what triggers layout, paint and composite:

CSS VS JS animation debates:

All about making your web page smooth:

Web Animations

The programming interface for CSSTransition, CSSAnimation and SVG.

Controlling animations

Can I use Web Animations API?

Are we animated yet?

Practice

Fork the Web Animations example, add a fast forward button, a slow motion button and a reverse button.

Web Components

Specifications that let us implement custom HTML elements

• Custom Elements
• HTML Imports
• Templates
• Shadow DOM

Enable Web Components

Custom Elements - custom tag

Custom Elements - type extension

smart-button

Practice

Create a simple custom HTML element, when its attribute 'pass' is changed to true, change its color to green.

WebComponents.org

Are We Componentized Yet