CSS Transitions and Transforms Course (How To)

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.

• 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.

• 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.

• 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.

• 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