YoVDO

CSS Animations and Transitions

Offered By: Frontend Masters

Tags

HTML & CSS Courses Web Development Courses Javascript Courses User Experience Courses Choreography Courses CSS Animation Courses CSS Transitions Courses

Course Description

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

Related Courses

Intro to HTML and CSS
Udacity
Responsive Web Design Fundamentals
Google via Udacity
HTML5 and CSS Fundamentals
World Wide Web Consortium (W3C) via edX
CSS Basics
Microsoft via edX
Advanced CSS Concepts
Microsoft via edX