Home ∣ Design Process ∣ Fundamentals ∣ Guidelines ∣ Accessibility ∣ Methods ∣ Research Design Systems ∣ AI ∣ Software Dev ∣ Low-Code Dev ∣ Soft Skills ∣ Career ∣ Tools ∣ Links

Animations

CSS Reducing-Motion Query

The prefers-reduced-motion media feature is used to detect if the user has requested the system minimize the amount of animation for motion it uses.

• 2 response values
  • No Preference (false) or Reduce (true)
• Types of motion to reduce
  • General - any motion that creates the illusion of movement
  • Specific
    • Multi-speed or multi-directional movement - parallax effects
    • Constant motion near text
    • Spinning and vortex effects
  • Not on the list - animated color changes, opacity fades, non-motion effects
    • These are examples of non-motion effects
• Respecting reduced motion requests
  1. Identify potentially triggering motion effects
  2. Decide on the best reduced effect based on context
• Provide a motion toggle for highly animated sites - Nintendo animal crossings example

📋 Links

Responsive Design for Motion

"prefers-reduced-motion" | Can I use... Support tables for HTML5, CSS3, etc

Using the CSS reduce-motion query to prevent motion