Transitions and Animations in CSS: Adding Motion with CSS

by Estelle Weyl

Overview

Add life and depth to your web applications and improve user experience through the discrete use of CSS transitions and animations. With this concise guide, you’ll learn how to make page elements move or change in appearance, whether you want to realistically bounce a ball, gradually expand a drop-down menu, or simply bring attention to an element when users hover over it.

Short and deep, this book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of Transitions and Animations in CSS, you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait? Learn how to make your web pages come alive today.

• Understand and learn how to implement Disney’s 12 principles of cartoon animation
• Learn which CSS properties you can animate and use in transitions
• Apply CSS’s four transition properties and nine animation properties to your CSS elements
• Use CSS keyframe animations to granularly control an element’s property values
• Learn details that will save you hours of debugging and megabytes of unnecessary JavaScript

Product Details

ISBN-13:	9781491929889
Publisher:	O'Reilly Media, Incorporated
Publication date:	05/08/2016
Pages:	116
Product dimensions:	6.90(w) x 9.00(h) x 0.30(d)

About the Author

Estelle Weyl is a front-end engineer who has been developing standards-based accessible websites since 1999. She writes two technical blogs pulling millions of visitors, and speaks about CSS3, HTML5, JavaScript and mobile web development at conferences around the world.

Table of Contents

Preface v

1 CSS Transitions and Animations 1

12 Basic Principles of Animation 1

Animation and Transition Considerations 5

2 Transitions 7

CSS Transitions 8

Fallbacks: Transitions Are Enhancements 9

Transition Properties 10

The transition-property Property 14

The transition-duration Property 21

The transition-timing-function Property 24

The transition-delay Property 30

The transition Shorthand Property 38

In Reverse: Transitioning Back to Baseline 40

Animatable Properties and Values 42

How Property Values Are Interpolated 44

Animatable Properties 47

Transition Events Revisited 53

3 Animation 55

Keyframes 56

Setting Up Your Keyframe Animation 57

Keyframe Selectors 58

Omitting from and to Values 59

Repeating Keyframe Properties 60

Animatable Properties 61

Nonanimatable Properties That Aren't Ignored 62

Dynamically Changing @keyframes Animations 63

Animated Elements 64

The animation-name Properly 64

The animation-duration Property 66

The animation-iteration-count Property 68

The animation-direction Property 69

The animation-delay Property 71

Animation Events 73

The animation-timing-function Property 83

The animation-play-state property 95

The animation-fill-mode Property 95

The animation Shorthand Property 99

Animation, Specificity, and Precedence Order 102

Specificity and !important 103

Animation Order 103

Animation Iteration and display: none; 104

Animation and the UI Thread 104

Seizure Disorders 104

Animation Events and Prefixing 105

Animationstart 105

Animationend 105

Animationiteration 106

Other Considerations 106

Printing Animations 106