SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial
CSS Animation 101
CSS Animation 101
Abstract
Hello, I’m Donovan
Book structure
Help and support
Need to brush up on your CSS?
Homework
More than words alone
What is animation on the web?
With great power comes great responsibility
Inspiration
Summary
Homework
In the browser
Local development
In summary
Homework
Transitions
Transition properties
In summary
Homework
Animation in the browser
Examples
Transitions vs. Animations
Homework
Transitions
Example: Button transition
Prefixes and browser compatibility
Homework
Shorthand vs Longhand
Things transitions don’t work on
Homework
Linear
Ease-in
Ease-out
Ease-in-out
Cubic-bezier
Steps
More examples
Homework
Example 1: Fancy button
Example 2: Background reveal
Multiple transitions on a single element
Homework
Add or remove classes
Controlling transitions with JavaScript
Let’s recap
Homework
A symbiotic relationship
The animation property
Keyframes
Prefixes
Homework
Using timing functions within keyframes
Homework
Things to look out for
Example: Save button wiggle effect
Homework
Traffic lights
Further reading
Homework
Homework challenge: Traffic lights
Recap: Animations
Putting them together
Homework
Heroes
Example: Scrolling background
Part 1: Background animation
Part 2: Adding the hover transition
Summary
Homework
Transform: Not an animation property
Transform: scale(), translateZ() and rotateY()
SVG, HTML and CSS
Animating the Star and Wars
Making it 3D
The Force Awakens
Homework
Wow.js
Using Wow.js
Adding “wow” classes
Hiding and showing
Using Animate.css
Using Modernizr
Homework
Make sure content is accessible
Give control
Allow for alternate inputs
Confusion
Don’t make me sick
Accessibility is for everyone’s benefit
Homework
CSS Animation cheatsheet
Resources to bookmark
Other tools
Next steps
Don’t be a stranger, now

Community Questions