CSS Animations 101 Samples

Source: CSS Animation 101 course
Welcome: breath
Transitions in actions
Transitions in actions Diamond to Circle
Transitions Linear timing
Transitions Ease in timing
Transitions Ease out timing
Transitions Ease in out timing
Transitions Curve bezier timing
Transitions Steps timing
Multiple transitions: fancy button
Multiple transitions: cat hover card
Transitions with JS: Simple show / hide
Animations: how keyframes work
Animations: how keyframes work with alternate direction
Animations Properties: Pulsing loader
Animations: Keyframes in action: Save Button Wiggle
Animations: Keyframes in action: Save Button Wiggle (Explained)
Multiple animations: Traffic light example
Animations and transitions: Storytelling: Screen background scrolling
Animations and transitions: 3D transforms: Star Wars
Revealing content on scroll: wow.js
Revealing content on scroll: wow.js + animate.css (animation framework)

CSS animation resources

CSS transitions and animations cheatsheet

Animate.css (Animation framework)

Hover.css (animation framework)

Snabbt.js: minimalistic animation library in javascript

Greensock animation platform: advanced animations

CSS animate tool: keyframe generator

Cubic bezier generator

Animation usability

CSS tricks

Sara Soueidan