# Respect "Reduce Motion" in Elementor Animations

> Shows Elementor content right away without entrance animations, motion effects or background slideshows for visitors whose device asks for reduced motion.

- Type: CSS
- Runs: Site-wide header
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: elementor, reduced-motion, animation
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-elementor-reduced-motion/

## Code

```css
@media (prefers-reduced-motion: reduce) {
    .elementor-invisible {
        visibility: visible !important;
    }

    .elementor-element.animated,
    .elementor-element .animated,
    .elementor-motion-effects-element,
    .elementor-background-slideshow__slide__image {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}
```

## Notes

Visitors without the reduced-motion setting still see your animations.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Respect "Reduce Motion" in Elementor Animations" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/