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