David Khourshid
Microsoft
CSS Animations and Transitions
4 hours, 14 minutes CC
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
CloseLearn 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
Table of Contents
Introduction
Section Duration: 15 minutes
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.
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
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.
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.
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.
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
David deep dives into the CSS transition syntax. CSS transitions will animate between the starting and ending values of any property that's able to be animated. They can be specified with the shorthand "transition" keyword or the expanded syntax which declares the property, duration, delay and timing function on separate lines.
Students are instructed to apply CSS transitions to animate the changing state of the form elements.
David walks through the solution to the Button Transition exercise.
Keyframes
Section Duration: 26 minutes
David explains that unlike CSS transitions, which animate between a beginning state and an ending state, CSS keyframes explicitly specify each step of an animation. Keyframes can be declared with percentages or more generically with the to/from keywords. Animation properties like animation-fill-mode and animation-iteration-count as well as applying multiple animations are demonstrated in this segment.
Students are instructed to use CSS keyframe animations to animate form elements.
David walks through the solution to the CSS Keyframes exercise. The animation-play-state property is also demonstrated in this segment.
Choreography
Section Duration: 24 minutes
David demonstrates how to use the nth-child selector and CSS variables to choreograph animations between multiple elements. Subsequent delays can be configured using the calc() method to calculate a new value based on a common duration variable.
Students are instructed to stagger the appearance of the form elements in the subscribe form.
David walks through the solution to the Stagger Animation exercise.
David composes animations using a wrapper element to allow the transform property to be animated in two different ways. Since the button's transform property is already being used to animate its position with the slide-up animation, the shake animation is applied to a wrapper element.
David demonstrates how frameworks like React can streamline the creation of choreographed animations. The ball elements are generated in a loop which also initializes the CSS custom properties.
State
Section Duration: 35 minutes
David discusses how animations can be tied to different application states. Data attributes can be added to elements in the application to specify states like loading or success. The JavaScript dataset API can be used as an alternative to the setAttribute method for controlling data attributes.
David creates a basic state machine to demonstrate how to manage application state. A state machine is a JavaScript Object with properties matching each state value and event declarations indicating which state should be returned given a certain event.
David answers questions about the complexity of managing state with React, managing elements with multiple states, and state machine naming conventions.
Students are instructed to apply animations to the form's subscribe, subscribing, success, and error states.
David walks through the solution to the Animating States exercise.
Layout Animations
Section Duration: 36 minutes
David implements the FLIP technique which is an acronym for first, last, invert, and play. Rather than directly animating expensive properties like x, y, width, and height, the FLIP technique calculates the first and last position/size of an element and uses transform properties to create the animation.
David optimizes the FLIP animation by moving the animation to the :before pseudo element to avoid the text being distorted. Questions about the requestAnimationFrame method are also answered in this segment.
Students are instructed to apply the FLIP technique to the figcaption element.
David walks through the solution to the FLIP technique exercise.
Reactive Animations
Section Duration: 51 minutes
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.
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.
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.
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.
David recreates part of a Dribbble animation to demonstrate how he approaches new animation challenges.
Wrapping Up
Section Duration: 3 minutes
David concludes the workshop by sharing a few more animation example from his Codepen account.
I have learned a lot in this CSS workshop at Frontend Masters. Specially how to create accessible and performative animations, as well as techniques like lerp, choreography, transitions and how to handle CSS keyframes and animation properties.
Alexsander Souza
Alexsander Souza
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
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
duren_dev
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops