diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 35d075c1a99b78..d4c3eb31ecf222 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -194,6 +194,7 @@ // Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details. // It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements. animation: hide-during-dragging 1ms linear forwards; + @include reduce-motion("animation"); } .block-editor-block-parent-selector { diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 16493e1a5aa7f0..b961646ff8c550 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -291,6 +291,7 @@ $block-editor-link-control-number-of-actions: 1; border-radius: 100%; animation: loadingpulse 1s linear infinite; animation-delay: 0.5s; // avoid animating for fast network responses + @include reduce-motion("animation"); } } } diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index a99311a3ca8151..890cb1a7a52ec4 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -18,6 +18,7 @@ &.show { animation: show-content-image 0.4s; + @include reduce-motion("animation"); } } } @@ -282,6 +283,7 @@ &.active { visibility: visible; animation: both turn-on-visibility 0.25s; + @include reduce-motion("animation"); img { animation: both turn-on-visibility 0.35s; } @@ -289,6 +291,7 @@ &.show-closing-animation { &:not(.active) { animation: both turn-off-visibility 0.35s; + @include reduce-motion("animation"); img { animation: both turn-off-visibility 0.25s; } @@ -303,6 +306,7 @@ animation: none; .lightbox-image-container { animation: lightbox-zoom-in 0.4s; + @include reduce-motion("animation"); // Override fade animation for image img { animation: none; @@ -310,6 +314,7 @@ } .scrim { animation: turn-on-visibility 0.4s forwards; + @include reduce-motion("animation"); } } &.show-closing-animation { @@ -317,6 +322,7 @@ animation: none; .lightbox-image-container { animation: lightbox-zoom-out 0.4s; + @include reduce-motion("animation"); // Override fade animation for image img { animation: none; @@ -324,6 +330,7 @@ } .scrim { animation: turn-off-visibility 0.4s forwards; + @include reduce-motion("animation"); } } } diff --git a/packages/components/src/animate/style.scss b/packages/components/src/animate/style.scss index 1d64423e42f1f0..f7ec41a2b0b682 100644 --- a/packages/components/src/animate/style.scss +++ b/packages/components/src/animate/style.scss @@ -50,6 +50,7 @@ .components-animate__loading { animation: components-animate__loading 1.6s ease-in-out infinite; + @include reduce-motion("animation"); } @keyframes components-animate__loading { diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 460aeaa2781cdf..a31fd87f9f0b7f 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -276,11 +276,7 @@ &.is-secondary.is-busy:disabled, &.is-secondary.is-busy[aria-disabled="true"] { animation: components-button__busy-animation 2500ms infinite linear; - // This should be refactored to use the reduce-motion("animation") mixin - // as soon as https://github.com/WordPress/gutenberg/issues/55566 is closed. - @media (prefers-reduced-motion: reduce) { - animation-duration: 0s; - } + @include reduce-motion("animation"); background-size: 100px 100%; /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */ background-image: linear-gradient( diff --git a/packages/nux/src/components/dot-tip/style.scss b/packages/nux/src/components/dot-tip/style.scss index 3ab0c1a540fd5a..720e24b9ad3c18 100644 --- a/packages/nux/src/components/dot-tip/style.scss +++ b/packages/nux/src/components/dot-tip/style.scss @@ -13,6 +13,7 @@ $dot-scale: 3; // How much the pulse animation should scale up by in size &::before { animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62); + @include reduce-motion("animation"); background: rgba(#00739c, 0.9); opacity: 0.9; height: $dot-size * $dot-scale;