CSS Animations and Transitions
Table of Contents
IntroductionDavid 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.
Animation FundamentalsDavid 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 EasingDavid 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 VariablesDavid 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 AnimateDavid 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.
CSS TransitionsDavid 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.
Button Transition ExerciseStudents are instructed to apply CSS transitions to animate the changing state of the form elements.
Button Transition SolutionDavid walks through the solution to the Button Transition exercise.
CSS KeyframesDavid 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.
CSS Keyframes ExerciseStudents are instructed to use CSS keyframe animations to animate form elements.
CSS Keyframes SolutionDavid walks through the solution to the CSS Keyframes exercise. The animation-play-state property is also demonstrated in this segment.
ChoreographyDavid 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.
Stagger Animation ExerciseStudents are instructed to stagger the appearance of the form elements in the subscribe form.
Stagger Animation SolutionDavid walks through the solution to the Stagger Animation exercise.
Composing AnimationsDavid 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.
Using Animations in ReactDavid 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 Machine Q&ADavid answers questions about the complexity of managing state with React, managing elements with multiple states, and state machine naming conventions.
Animating States ExerciseStudents are instructed to apply animations to the form's subscribe, subscribing, success, and error states.
Animating States SolutionDavid walks through the solution to the Animating States exercise.
Layout Animation FLIP TechniqueDavid 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.
FLIP Technique Q&ADavid 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.
FLIP Technique ExerciseStudents are instructed to apply the FLIP technique to the figcaption element.
FLIP Technique SolutionDavid walks through the solution to the FLIP technique exercise.
Pointer EventsDavid 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 TechniqueDavid 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 AnimationsDavid 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-motionDavid 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 AnimationDavid recreates part of a Dribbble animation to demonstrate how he approaches new animation challenges.