BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

Web Development

501Introduction to CSS Transitions
502The transition-property Property
503The transition-duration Property
504The transition-timing-function Property
505Custom Cubic Bezier Curves
506The transition-delay Property
507The Shorthand transition Property
508Transitioning Multiple Properties
509Properties That Can and Cannot Transition
510Triggering Transitions with State Changes
511Transition Events in JavaScript
512Common Transition Patterns and Best Practices
513Introduction to @keyframes
514The animation-name Property
515The animation-duration Property
516Keyframe Percentages
517The from and to Keywords
518Multiple Properties in Keyframes
519The animation-timing-function
520The animation-delay Property
521The animation-iteration-count
522The animation-direction Property
523The animation-fill-mode Property
524The animation-play-state Property
525The animation Shorthand
526Multiple Animations on One Element
527Animation Events in JavaScript
528The Transform Property and Its Purpose
5292D Translation with translate()
530Scaling Elements with scale()
531Rotating Elements with rotate()
532Skewing Elements with skew()
533Transform Origin Point
534Combining Multiple Transforms
5353D Transforms Introduction
5363D Translation and Rotation
537Perspective and Perspective-Origin
538Transform-Style and Backface-Visibility
539Transform Performance Best Practices
540The Browser's Rendering Pipeline
541Properties That Trigger Reflow
542Properties That Trigger Repaint
543Composite-Only Animations
544The will-change Property
545Hardware Acceleration and Layer Promotion
546Measuring Animation Performance
547Avoiding Layout Thrashing
548requestAnimationFrame for Smooth Updates
549Performance Budget for Animations
550Understanding Motion Sensitivity and Vestibular Disorders
551The prefers-reduced-motion Media Query
552Implementing Reduced Motion Variants
553Disabling Autoplay and Infinite Loops
554Cross-Fades Instead of Movement
555Essential Motion vs Decorative Motion
556JavaScript Detection of Motion Preferences
557Testing Reduced Motion Implementations

Web Development

501Introduction to CSS Transitions
502The transition-property Property
503The transition-duration Property
504The transition-timing-function Property
505Custom Cubic Bezier Curves
506The transition-delay Property
507The Shorthand transition Property
508Transitioning Multiple Properties
509Properties That Can and Cannot Transition
510Triggering Transitions with State Changes
511Transition Events in JavaScript
512Common Transition Patterns and Best Practices
513Introduction to @keyframes
514The animation-name Property
515The animation-duration Property
516Keyframe Percentages
517The from and to Keywords
518Multiple Properties in Keyframes
519The animation-timing-function
520The animation-delay Property
521The animation-iteration-count
522The animation-direction Property
523The animation-fill-mode Property
524The animation-play-state Property
525The animation Shorthand
526Multiple Animations on One Element
527Animation Events in JavaScript
528The Transform Property and Its Purpose
5292D Translation with translate()
530Scaling Elements with scale()
531Rotating Elements with rotate()
532Skewing Elements with skew()
533Transform Origin Point
534Combining Multiple Transforms
5353D Transforms Introduction
5363D Translation and Rotation
537Perspective and Perspective-Origin
538Transform-Style and Backface-Visibility
539Transform Performance Best Practices
540The Browser's Rendering Pipeline
541Properties That Trigger Reflow
542Properties That Trigger Repaint
543Composite-Only Animations
544The will-change Property
545Hardware Acceleration and Layer Promotion
546Measuring Animation Performance
547Avoiding Layout Thrashing
548requestAnimationFrame for Smooth Updates
549Performance Budget for Animations
550Understanding Motion Sensitivity and Vestibular Disorders
551The prefers-reduced-motion Media Query
552Implementing Reduced Motion Variants
553Disabling Autoplay and Infinite Loops
554Cross-Fades Instead of Movement
555Essential Motion vs Decorative Motion
556JavaScript Detection of Motion Preferences
557Testing Reduced Motion Implementations

← Web Development

Lesson 510 of 2,982·9. CSS Transitions and AnimationsPro lesson

Triggering Transitions with State Changes

Using pseudo-classes like :hover, :focus, and :active to initiate transitions.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course