CSS animations

By: Matthew Poulson

Presentation Goals

Why Use Animations?

"Moving elements are a powerful tool to attract users’ attention. When designing an animation consider its goal, its frequency of occurrence, and its mechanics. "

-AURORA BEDFORD 

• Help user orient after state change
• Help user understand when the functionality of something has changed
• Highlight an Obscure state change
• Inform user of something's function

What can Animations do?

(reduce the surprise of state change)

Guide the user to a new state.

As opposed to cut to state.

Orientation

Functionality Chnages

Zoom in

View more details

Highlight

Bring attention to what is happening

Visual Feedback

Elements should respond to actions

What are Good Principles?

https://material.google.com/

60fps

render frames every 16ms

Performance

https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en

"...should be fast enough that it doesn't cause waiting, but slow enough that the transition can be understood."

Fast

Long: 300 - 400ms

Short: 150 - 200ms

https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves

Good

Bad

"Acceleration and deceleration changes should be smooth across the duration of an animation so that movement doesn't appear mechanical."

Natural easing curves

https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves

"Create a clear, smooth focal path in a single direction."

Focal Point

https://material.google.com/motion/material-motion.html#material-motion-how-does-material-move

"When multiple elements remain visible during a transition, only the most important ones should be included. Some elements may disappear during the transition but reappear once the transition completes, if they are too distracting during the transition itself."

Multiple shared elements

https://material.google.com/motion/material-motion.html#material-motion-how-does-material-move

Good

Bad

"Associate newly created surfaces to the element or action that creates them. New surfaces usually emerge from radial or rectangular expansions from the point of touch."

Creating new surfaces

https://material.google.com/motion/material-motion.html#material-motion-how-does-material-move

Good

Bad

"Connect user input to screen reactions by using touch ripples to both indicate the point of touch, and to confirm that touch input was received. For touch or mouse, this occurs at the point of contact."

Ripple

https://material.google.com/motion/choreography.html#choreography-radial-reaction

What CSS Properties can you Animate?

Inexpensive Animations

transform: translateX(1em);
transform: translateY(2em);
transform: scaleX(3);
transform: scaleY(4);
transform: rotateX(5deg);
transform: rotateY(6deg);
transform: rotateZ(7deg);
opacity: .8;

Properties that are expensive

• color    
• border-style
• border-radius 
• background
• background-image
• background-position    
• background-repeat
• background-size

• text-decoration
• outline
• outline-color   
• outline-style  
• outline-width
• box-shadow
• visibility    

Note: they trigger Paint

Properties that are even more expensive

• width    
• height
• padding    
• margin
• display    
• border-width
• border    
• position  

• font-size
• float    
• clear    
• text-align
• bottom    
• top
• right
• left

• overflow    
• overflow-y
• font-family
• font-weight
• line-height
• min-height
• white-space
• vertical-align

Note: they trigger Layout

• height/width: auto
• display: none
• float
• position: static / absolute

Properties That can't be Animated

How do you Animate CSS Properties?

CanIUse?

http://caniuse.com/#feat=css-animation

http://caniuse.com/#search=transitions

Transitions

Animate a change of a property

Here we modify the `max-height` of an element

transition-property

transition-duration

Here we modify both the max-height and opacity of an element

transition-timing-function

Example

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: steps(5, end);
transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);

Google's Material Design standard curve

cubic-bezier(0.4, 0.0, 0.2, 1);

Now we add a transition-timing-function

Animations and Keyframes

keyframes

Define the properties to apply at what point in the animation

animation

Apply keyframes to an element

Define how those animations behave

animation-delay: <time>

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

animation-iteration-count: 
    infinite | <number>

animation-play-state: 
    running | paused

Additional Properties

Transition and Animation together

Example

How to Integrate them into your App?

Pseudo-classes  selectors

element:hover
element:focus
element:invalid
element:valid
element:enabled
element:disabled
element:indeterminate
element:in-range
element:optional

Hover Example

Form invalid Example

JavaScript

node.classList.add();
node.classList.remove();
node.classList.toggle();

JavaScript Example

Try to use CSS Selectors before you use JavaScript...

Bonus - animate()

Example

Polyfill

https://github.com/web-animations/web-animations-js