This is great and something that I wasn't even aware. Thanks for the PR!

I do want to merge it but I'd prefer that it was added directly in the CSS files as it's easier to people to be aware of it. Also, wouldn't be easier to achieve the feature directly with the animated class instead of class by class?

@eltonmesquita I wasn't sure what would be preferred, it seemed like a lot of boilerplate that people might skip if it had to be manually repeated in every CSS file.

The animated class doesn't define all of the animations, so reduced motion won't match if it is targeted on that class alone. That was where I started, and it didn't work...hence the addition to include every specific animation class.

Certainly, to repeat the media query for every animation class is not the best option.

I think that the best options is to change the position of the animated class - that resides on _base.css - to the end of the generated file instead the beginning. This won't have any impact on the library, yet will solve the problem in a more elegant way.

Can you do that? I'll happily merge the PR!

@eltonmesquita how would the order of .animated matter if the animations and transitions that have to be overridden are all defined on classes like .bounce, .flash, etc.? It's a specificity problem, no?

One other thing I tried was compiling a list of CSS classes into one reduceMotion file with Gulp, but it was super difficult to accomplish and I went for the current solution instead. Maybe that's the way to go, though?

A reduceMotion.css file could end up looking like this, where the applicable classes would get appended to the list of selectors:

@media (prefers-reduced-motion) {
    .animated,
    .bounce,
    .flash,
    ...etc {
        animation-name: unset;
        transform: none !important;
    }
}

Sorry, I think that I didn't make myself clear.

The way animate.css works today, you always got to have at least two classes: animated and the animation name's class. Although it's possible to make things work without the animated class it's not advised.

If we set the media query on the animated class and put its declaration in the end of the generated file, everything should work just fine.

What do you think? Would that be a good way to solve the problem?

This is a great addition, thank you @marcysutton! To @eltonmesquita’s point, we can use the “cascading” part of “CSS” to our advantage here 😊

To clarify, I think the suggestion is that we append rather than prepend the _base.css file in the gulp process so that the .animated class comes last. Then, we only need a media query that sets:

@media (prefers-reduced-motion) {
  .animated {
    animation: none !important;
    transform: none !important;
  }
}

Rather than media queries for each and every animation class.

Sounds great! I tested it on Friday to make sure it works, just hadn't gotten around to committing a fix yet.

Thanks for these updates @marcysutton! I'm actually about to merge #834, which might require a rebase here, but would love to get this feature in 3.7.0. Let me know when this is good to go from your POV.

@daneden I pulled from master and updated my PR, it should be good to go! You can go ahead and squash it into one commit if you like. Thanks for your support!

@marcysutton thank you for contributing!!

alright, @daneden @marcysutton @eltonmesquita just updated mine and submit a PR...

While I fully agree with the addition, I think this is important to document on GH and project homepage. And we maybe should consider 2 compiled min.css. One with and one without. It took days to realize that the reason for animations have stopped lies here and that the CMS using it has wrapped itself into this query which made animate.css stop completely.

@diqidoq we will consider that one... maybe I can include it as an option when you build your customized version of animate.css let me work on it. :)

I had a problem with animations in Firefox with these rows in animate.css :

@media (print), (prefers-reduced-motion) {
.animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
The animations didn't work because of “Turn off all unnecessary animations (when possible).” - setting in Windows system is set to "on". But in Chrome or IE the animations were working and I didn't understand why not in Firefox.

So, I had 3 solutions:

1. “Turn off all unnecessary animations (when possible).” to set to "off"
   or
2. add new item to about:config in Firefox - ui.prefersReducedMotion = 0
   or
3. remove these rows from animate.css

But now I have big question, which solution is right guys?

Hi @TomCatSK I think we need to add option on turning off and on this feature. @eltonmesquita @daneden what do you think?

It sounds like a good idea. I agree with you.