Search 6,000+ CA Community College Courses

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Frontend Masters

CSS Animations and Transitions

via Frontend Masters

Go to class Write review

Overview

UI animations play an important role for web apps and websites in improving the user experience. But creating animations can be difficult, or done excessively. Learn CSS animation basics and transition to advanced concepts like orchestration and choreography. Techniques you’ll learn: CSS transitions, animations, custom properties, data attributes, choreography, animation states, layout animations, and reactive animations with a little bit of JavaScript.

Syllabus

  • Introduction
  • Course Overview
  • Animation Fundamentals
  • Animation Easing
  • CSS Variables
  • What to Animate
  • CSS Transitions
  • Button Transition Exercise
  • Button Transition Solution
  • CSS Keyframes
  • CSS Keyframes Exercise
  • CSS Keyframes Solution
  • Choreography
  • Stagger Animation Exercise
  • Stagger Animation Solution
  • Composing Animations
  • Using Animations in React
  • States & Data Attributes
  • Creating a Simple State Machine
  • State Machine Q&A
  • Animating States Exercise
  • Animating States Solution
  • Layout Animation FLIP Technique
  • FLIP Technique Q&A
  • FLIP Technique Exercise
  • FLIP Technique Solution
  • Pointer Events
  • Lerp Technique
  • In-Flight Application Animations
  • prefers-reduced-motion
  • Recreating an Animation
  • Wrapping Up

Taught by

David Khourshid

Reviews

Start your review of CSS Animations and Transitions

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.