CSS Transitions and Transforms Course (How To)

CSS transitions and transforms can create simple animations that enhance user interactions in websites and apps. In this course, you'll build an interactive image gallery using CSS transitions and transforms.

You'll use transition properties to define durations, delays, and easing functions. Then, you'll learn how to rotate, scale, and move elements in 2D and 3D space, with CSS transforms.

What you'll learn

• Transition properties
• Transform properties
• 3D transforms
• Cubic-bezier

Getting Started with CSS Transitions

CSS transitions provide a way to control property changes over a given duration. Learn basic CSS transition properties that define a duration and the property (or properties) you want to transition.

Chevron 9 steps

• Getting to Know Transitions and Transforms

  2:34

• Creating Your First Transition with transition-duration

  8:45

• Transitioning Specific Properties with transition-property

  2:54

• Transition Challenge

  2 objectives

• Animatable CSS Properties

  3:34

• The Transition Challenge Solution

  2:22

• Transitioning Multiple Properties

  5:09

• Transitioning Multiple Properties

  2 objectives

• Review: Getting Started with CSS Transitions

  7 questions

Transition Timing Functions and Delays

Learn transition properties for varying a transition's speed and start time.

Chevron 5 steps

• Control a Transition's Start Time with transition-delay

  7:36

• Change a Transition's Speed with Timing Functions

  6:59

• Combine Transition Properties with the transition Shorthand

  5:20

• Review: Timing Functions and Delays

  7 questions

• Timing Functions and Delays Challenge

  5 objectives

Getting Started with CSS Transforms

CSS transforms visually manipulate content by rotating, scaling, skewing and moving elements in two-dimensional or three-dimensional space.

Chevron 11 steps

• Rotating Elements

  4:37

• Animating a CSS Transform

  4:22

• Skewing Content

  3:48

• Scaling Elements

  3:12

• Changing the Transform Position with transform-origin

  7:01

• Moving Content with translate()

  4:55

• Creating a Slide Transition

  5:39

• Combining Transforms

  3:36

• CSS Transforms Challenge

  2 objectives

• Custom Timing Functions with cubic-bezier()

  6:43

• Review: Getting Started with CSS Transforms

  7 questions

Adding 3D Effects with CSS

3D transforms are an extension of 2D transforms. 3D transform properties add depth to elements on the page by introducing a Z-axis where elements can translate, rotate and scale within a 3D perspective.

Chevron 10 steps

• Understanding 3D Transforms

  2:42

• Activate 3D Space with perspective

  6:47

• Create a Flipping Animation with 3D Transform Properties

  10:09

• 3-Dimensional Rotations with rotateZ() and rotate3d()

  4:47

• Changing the Viewing Position with perspective-origin

  4:46

• 3D Transforms Challenge

  2 objectives

• Creating a Consistent Depth Perspective

  2:39

• Build a Rotating 3D Cube

  9:31

• Moving Content with translate3d()

  3:44

• Review: 3D Transforms

  6 questions