CSS Animations and Transitions

4 hours, 14 minutes CC
CSS Animations and Transitions

Course Description

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.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: July 25, 2022

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 15 minutes
  • Introduction
    David Khourshid begins the course by sharing a variety of CSS animation examples. Animation can be subtle visual cues that enhance a design. They can also be large whimsical interactions. The course repository is introduced and the setup instructions are also discussed in this segment.
  • Course Overview
    David walks through the lessons in the course. The earlier lessons will focus on animations fundamentals and the basics of CSS transitions and keyframe animations. Later lessons incorporate JavaScript and more advanced techniques.

Fundamentals

Section Duration: 35 minutes
  • Animation Fundamentals
    David explains that animations can add guidance and clarification to an interface. Animations can indicate where an object comes from or communicate what changes from page to page or during a state transition. The iteration time, delay, and timing function all affect the behavior of an animation.
  • Animation Easing
    David adds an initial animation to illustrate how easing affects how the animation plays. A linear ease will play the animation at the same speed from beginning to end. Adjusting the cubic bezier values will add acceleration or deceleration to the beginning and end of the animation. Most modern browsers now have visual animation tools for adjusting and previewing different easing functions.
  • CSS Variables
    David demonstrates how to use CSS variables. The variable name is prefixed with two dashes and can either be assigned a value when it's declared, or passed a default value when it's used inside the var() method. CSS Variables follow the cascade so values assigned in a selector with more specificity will override a less specific assignment.
  • What to Animate
    David discusses performance considerations when animating CSS properties. Properties like transform and opacity are less expensive to animate because they don't require recalculation of the layout or a repaint. Other properties like height and width require a repaint and negatively impact the performance of the page.

Transitions

Section Duration: 24 minutes

Keyframes

Section Duration: 26 minutes

Choreography

Section Duration: 24 minutes

State

Section Duration: 35 minutes

Layout Animations

Section Duration: 36 minutes

Reactive Animations

Section Duration: 51 minutes
  • Pointer Events
    David explains that, unlike state or layout animations, reactive animations are based on continuous input. An example would be an element following the mouse. The pointermove event can be used to capture the position of any pointer device. CSS custom properties can make the pointers position available in CSS.
  • Lerp Technique
    David introduces the Lerp technique which stands for linear interpolation. This technique creates a reactive animation by continuously calculating where an element should be, but instead of transforming the element to that position, the element moves a fraction of the way there. After the Lerp technique is applied to the ball, additional examples of using reactive animations are explored.
  • In-Flight Application Animations
    David uncomments the CSS transitions and animations in the In-Flight demo application and explores how they make the transition between screens much less jarring.
  • prefers-reduced-motion
    David demonstrates how the prefers-reduced-motion media query can be used to remove animations based on a user's preference. Questions about accessibility and the FLIP technique are also discussed in this segment.
  • Recreating an Animation
    David recreates part of a Dribbble animation to demonstrate how he approaches new animation challenges.

Wrapping Up

Section Duration: 3 minutes
Awesome course! Lots of stuff I have not tried before. I hope there will be a follow-up course to this one with David, I need more 🤩
Andrea Abrahamsen

Andrea Abrahamsen

AndreaBGoodWill

Delving into more advanced topics like choreography I got a chance to learn how to orchestrate animations so that the user experience is intuitive and feels natural.
Michael Duren

Michael Duren

duren_dev

Such a good course by David, he clearly explained about animations, I don't fear doing animations on my own without any frameworks. Thank You David
hitesh

hitesh

shiva_baaba

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now