Merge pull request #1083 from OfficeDev/miwhea/prefers-reduced-motion…

…-fix

Fix prefers-reduced-motion media queries

src/sass/mixins/_Animation.Mixins.scss

@@ -158,43 +158,48 @@
   }
 }
 
-// Wraps content in a 'prefers-reduced-motion' media query, so that the animation/transition only takes
-// effect if the user has NOT opted to reduce motion. This is currently supported by Safari on iOS and macOS,
-// and may be coming to other platforms and browsers in the future.
+// Wraps content in a 'prefers-reduced-motion' media query, so that it will only be
+// applied where the user has opted to reduce motion. This is currently supported by
+// Safari on iOS and macOS, and will likely be coming to other browsers in the future.
 //
-// See this article for more details: https://css-tricks.com/introduction-reduced-motion-media-query/
-@mixin ms-prefers-motion {
-  @media (prefers-reduced-motion: no-preference) {
+// See this article: https://css-tricks.com/introduction-reduced-motion-media-query/
+@mixin ms-prefers-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
     @content;
   }
 }
 
 // Outputs the properties for an animation.
 @mixin ms-animation($names, $duration, $timing: $ms-animation-ease-1, $fillMode: both) {
-  // Set a default value for the version-scoped variable if it isn't assigned
+  // Set a default value for the version-scoped variable if it isn't assigned.
   $ms-fabric-version-suffix: '' !default;
 
-  // Append the scoping suffix to each animation name
+  // Append the scoping suffix to each animation name.
   $namelist: ();
-
   @each $name in $names {
     $newname: $name#{$ms-fabric-version-suffix};
-
     $namelist: append($namelist, unquote($newname), 'comma');
   }
 
-  @include ms-prefers-motion {
-    animation-name: $namelist;
-    animation-duration: $duration;
-    animation-timing-function: $timing;
-    animation-fill-mode: $fillMode;
+  // Output the animation's properties.
+  animation-name: $namelist;
+  animation-duration: $duration;
+  animation-timing-function: $timing;
+  animation-fill-mode: $fillMode;
+
+  // Make the animation instant for users who prefer no motion.
+  @include ms-prefers-reduced-motion {
+    animation: none;
   }
 }
 
 // Ouptuts the properties for a transition.
 @mixin ms-transition($transition) {
-  @include ms-prefers-motion {
-    transition: $transition;
+  transition: $transition;
+
+  // Make the transition instant for users who prefer no motion.
+  @include ms-prefers-reduced-motion {
+    transition: none;
   }
 }