CSS Animations and Transitions for the Modern Web

Chapter 1: Introduction

* Why CSS Animation is Important

* Critical and Non-Critical Visual Experience

* Tools: What you need



Chapter 2: Transforms

* Browser Support

* Fallbacks and PolyFills

* CSS Visual Formatting Model

* The Transform Rendering Model

* 2-Dimensional Transforms

- transform property

- transform-origin property

* 3-Dimensional Transforms

- Perspective property

- Perspective-origin property

- Backface-visibility property

* Transform Functions

- 2-Dimensional Functions

matrix()

translate()

translateX()

translateY()

scale()

scaleX()

scaleY()

rotate()

skew()

skewX()

- 3-Dimensional Functions

matrix3d()

translate3d()

translateZ()

scale3d()

scaleZ()

rotate3d()

rotateX()

rotateY()

rotateZ()

perspective()

* Combining Transforms



Chapter 3: Transitions

* Browser Support

* Fallbacks and PolyFills

* Transition Properties

- Transition-property

- Transition-duration property

- Transition-timing-function property

ease

linear

ease-in

ease-out

ease-in-out

step-start

step-end

steps

cubic-bezier

- Transition-delay property

- Transition shorthand property

* Starting and Reversing Transitions

* CSS properties that can be transitioned

* Transition Events



Chapter 4: Animation

* Browser Support

* Fallbacks and PolyFills

* Keyframes

- @Keyframes rule

* Animation Behavior

- Differences between animation and transitions

* Animation Properties

- animation-name property

- animation-duration property

ease

linear

ease-in

ease-out

ease-in-out

step-start

step-end

steps

cubic-bezier

- animation-timing-function property

- animation-iteration-count property

- animation-direction property

- animation-play-state property

- animation-delay property

- animation-fill-mode property

- Animation shorthand property

* CSS Properties that can be animated

* Animation Events

- Animation-start

- Animation-end

- Animation-iteration



Chapter 5: Principles for More Realistic Animation

* When to use Transitions and when to use animation

* Disney's Twelve principles of animation

- Squash and stretch

- Anticipation

- Staging

- Straight Ahead Action and Pose to Pose

- Follow Through and Overlapping Action

- Slow In and Slow Out

- Arcs

- Secondary Action

- Timing

- Exaggeration

- Solid Drawing

- Appeal



Chapter 6: Examples



End Matter

* Resources

* About the Author

* Index