diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss index e5bbf863757356..728f702ba16303 100644 --- a/packages/base-styles/_animations.scss +++ b/packages/base-styles/_animations.scss @@ -14,10 +14,10 @@ } } - - animation: __wp-base-styles-fade-in $speed $easing $delay; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not (prefers-reduced-motion) { + animation: __wp-base-styles-fade-in $speed $easing $delay; + animation-fill-mode: forwards; + } } @mixin animation__fade-out($speed: 0.08s, $delay: 0s, $easing: linear) { @@ -30,10 +30,10 @@ } } - - animation: __wp-base-styles-fade-out $speed $easing $delay; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not (prefers-reduced-motion) { + animation: __wp-base-styles-fade-out $speed $easing $delay; + animation-fill-mode: forwards; + } } // Deprecated diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index e2f953e5787814..9f089b8d9e8322 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -141,10 +141,13 @@ // Tabs, Inputs, Square buttons. @mixin input-style__neutral() { box-shadow: 0 0 0 transparent; - transition: box-shadow 0.1s linear; + + @media not (prefers-reduced-motion) { + transition: box-shadow 0.1s linear; + } + border-radius: $radius-small; border: $border-width solid $gray-600; - @include reduce-motion("transition"); } diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss index 642a641e6e5952..32214cb0f157ad 100644 --- a/packages/edit-widgets/src/components/header/style.scss +++ b/packages/edit-widgets/src/components/header/style.scss @@ -147,8 +147,9 @@ } svg { - transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; - @include reduce-motion("transition"); + @media not (prefers-reduced-motion) { + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; + } } &.is-pressed {