It stoped working in latest Chrome and Firefox

[martinlombana]

This is a bit confusing, but even your website, when you click "Animate" stopped working for latest chrome and firefox.

It does work in Edge, though. Any idea why?

I noticed it in a project, that all animations stopped working, and decided to theck your own website. Pretty weird this is test with chrome ( I am clicking the button).

[martinlombana]

I found the issue.

reduced-motion, something that as a web-developer I never activated, if not set, get's picked up as set.

If you remove this last part in animate.css:

@media (print), (prefers-reduced-motion) { .animated { -webkit-animation: unset !important; animation: unset !important; -webkit-transition: none !important; transition: none !important; } }

Everything works again.

Now, the questions that arises is:

1. How can I set prefers-reduced-motion in Chrome? I don't find the option anywhere. So weird.

2. Probably the mods that you introduced, @daneden, although supossed to work, should be apart, or set up in another way. Because it seems that it causes problems and not all devices pick that up correctly.

For debuggin info, @daneden, I tested on Vanilla:

Google Chrome is up to date: Version 74.0.3729.108 (Official Build) (64-bit)

And vanilla:

Firefox 66.0.3 (64-bit)

And I confirm that it does not work, because of that media query.

[eltonmesquita]

Hello.
Chrome and Firefox on Windows set this configuration based on Windows configurations itself. If you choose reduced animations on Windows configuration than the browsers will match the media query and disable the animations.

Unfortunately this is a bit confusing right now as it's not clear to everyone that this is an OS config. I might add this to the read me to clarify things.

[martinlombana]

Yep. Because most people, like me, never touched that setting. And id animations stop working, it might lead to crazyness 😉. Maybe make those lines optional and not included by default? Best,

[Benoit75]

Hello,
Thank's for your all your work (@daneden and bug hunter @martinlombana & @eltonmesquita) : this bug drive me crazy this morning !!!

For those who would like to reactivate this setting (before a hopfully new release of animate) :

1. Press Win+R to open the Run dialog.
2. Type in sysdm.cpl and press enter to launch windows settings pannel
3. In the dialog windows that opens, click the Advanced tab.
4. Choose Custom and then checked 'Fade or Slide ToolTips in view'

Best Regards

[martinlombana]

Good tip, But that would just work for you. Other users might be in our situation, therefore not having animations on their system when they actually want them... 🙂

[marlon-tucker]

Hello,

According to this google developer page https://developers.google.com/web/updates/2019/03/prefers-reduced-motion the media query has an additional parameter, either reduce or no-preference.

However, the media query which animate.css is using does not have a check for this parameter, and so I believe the rules are being applied regardless, even though I suspect in most instances it will be set to no-preference.

https://github.com/daneden/animate.css/blob/0ca8f2dc7c74c9e76b93bc378dad8b1cc1590dad/source/_base.css#L46-L51

[eltonmesquita]

Just to make it clear, this is not a bug. It's the way the browser's implementation works. It's something that developers should be aware when using animate.css or any animation in a browser.

Safari's implementation is based on the browser's configuration, not in a system wide implementation, for instance.

@marlon-tucker, thanks for the reference. I'll have a look at the link and see if what's the best way to implement the feature.

[martinlombana]

@eltonmesquita not a "bug" per se, but maybe not something that is forced, out of the box in an animation framework. Don't you agree?

[warengonzaga]

Hello everyone, I remember someone is requesting this feature to be an option for the developer who uses animate.css and makes it default to NO. I can't find that issue here so I refer here that issue. @eltonmesquita is it a good idea to make this feature an optional? and make it default as no?

[shpuld]

Wouldn't it be a better idea to use animation-duration: 0s; and transition-duration: 0s; to remove animations instead of forcing animations to unset and transitions to none, which actually breaks websites? In our case we rely on animations for a sliding menu which completely broke with the Chrome 74 update thanks to this, while with duration 0's it would still work just without any animation.

[XEQTIONR]

Thanks so much for this. I'm close to finishing a project and suddenly, all (or most) animations broke after a web-pack re-build. Took me a while to figure out what had caused the problem. Didn't expect animate.css to break since it's rather a simple framework. But very annoying. I'm having to use a custom version of the CSS file (with that part commented out). Can anyone please post a PROPER way to toggle this option. And I don't mean, just turn it off on my browser.

[XEQTIONR]

Now I'm thinking that it wasn't because of the web-pack build. Because I checked and that section of the code was always there. It must be automatic chrome update.

[toviszsolt]

@marlon-tucker found the right reason. #932

[yellow1912]

This is a breaking issue, it causes the animation to stop working, elements to stop appearing and such. Can a fix for this be pushed ASAP? It's just a very minor change to the current rule.

[toviszsolt]

Solution committed, we are waiting for merge it to a release. You can check in pull requests...

[toviszsolt]

Temporary solution until new release published:

• animate-3.7.1-rc.css
• animate-3.7.1-rc.min.css

Test: https://codepen.io/badboy/full/eavwRg

[rendy44]

@sivot Does not work either on Chrome 74 windows.

[toviszsolt]

@rendy44 what does not work? Show me your sample page or code. If animation not playing in linked codepen, then you need to enable animations in Windows.

[toviszsolt]

It's okay, if animations don't playing in only cases below:

• On OSX or IOS reduced motion option turned ON in OS level
• On Windows Show animations in Windows turned OFF in OS level

In any other cases the animations need to playing...

Change Reduce Motion Settings:

• OSX: Settings > General > Accessibility > Reduce Motion
• IOS: System Preferences > Accessibility > Display > Reduce Motion
• Windows: Settings > Ease of Access > Show animations in Windows

[batata004]

Just today I found out this thread. I spent the last 3 days trying to fix this in a very complex add. I made very simple test cases and found out that animate.css by itselft is causing this problem.

The problem is that I use animate.css in hunderds of websites importing it from CDN. All those websites are broken right now. I think animate.css should make this prefers-reduced-motion optional and NOT default. The default should be: ANIMATE - this is actually the name of the library. If the user wants to respect prefers-reduced-motion it should make the user set that explicitly!

Any idea if this stuff will be corrected and removed as default?

[warengonzaga]

Just today I found out this thread. I spent the last 3 days trying to fix this in a very complex add. I made very simple test cases and found out that animate.css by itselft is causing this problem.

The problem is that I use animate.css in hunderds of websites importing it from CDN. All those websites are broken right now. I think animate.css should make this prefers-reduced-motion optional and NOT default. The default should be: ANIMATE - this is actually the name of the library. If the user wants to respect prefers-reduced-motion it should make the user set that explicitly!

Any idea if this stuff will be corrected and removed as default?

Hello, I already recommend it and we are working on updates... here's my reply and suggestion about his issue.

Hello everyone, I remember someone is requesting this feature to be an option for the developer who uses animate.css and makes it default to NO. I can't find that issue here so I refer here that issue. @eltonmesquita is it a good idea to make this feature an optional? and make it default as no?

@eltonmesquita is working on updates...

[batata004]

Thanks! :) You said @eltonmesquita is "working"? The "work" is only to remove that prefers-reduced-motion from the css file OR set prefers-reduced-motion with a value - I disagree with the guy that said that this problem is not a bug - I think it is. The bug is that the animate.css file only makes use of prefers-reduced-motion without any parameter (as it should have done).

[warengonzaga]

@batata004 @eltonmesquita working on updates... which means not only that issue but all issues in this repo... also adding new features... that's why he is working on updates together with bug fixes ;) please be patient.

[Buxey]

It's okay, if animations don't playing in only cases below:

• On OSX or IOS reduced motion option turned ON in OS level
• On Windows Show animations in Windows turned OFF in OS level

In any other cases the animations need to playing...

Change Reduce Motion Settings:

• OSX: Settings > General > Accessibility > Reduce Motion
• IOS: System Preferences > Accessibility > Display > Reduce Motion
• Windows: Settings > Ease of Access > Show animations in Windows

Thanks this worked!

[eltonmesquita]

A new version was release with the fix on #931. Now things should work better.

[warengonzaga]

A new version was release with the fix on #931. Now things should work better.

See guys? I said earlier that @eltonmesquita is working on the new version with this fix... hehe

[professorx00]

Hello,
Thank's for your all your work (@daneden and bug hunter @martinlombana & @eltonmesquita) : this bug drive me crazy this morning !!!

For those who would like to reactivate this setting (before a hopfully new release of animate) :

1. Press Win+R to open the Run dialog.
2. Type in sysdm.cpl and press enter to launch windows settings pannel
3. In the dialog windows that opens, click the Advanced tab.
4. Choose Custom and then checked 'Fade or Slide ToolTips in view'

Best Regards

Thanks so Much this solved my Issue.

[FredyWenger]

I had the problem (no animation) in google chrome some time ago, as animation in the windows settings were deactivated (and google - for whatever not to comprehend! reason - take care about .
Activated - worked again
Since yesterday - animations again don't have worked again
I first though, the windows animations were deactivated again in Windows (as I had a loved win update and you know MS...)
But this was nit the case (and other websites animations sill have worked)
Thanks a posting here, I have deactivated:
@media (prefers-reduced-motion) { .animated { -webkit-animation: unset !important; animation: unset !important; -webkit-transition: none !important; transition: none !important; } }
(last code lines in my animate.css) and it seems to work again (and hopefully forever :-)

[toviszsolt]

@FredyWenger sorry man but look like you don't understand this "reduce motion" concept.
IF USER TURN OFF ANIMATIONS ON OPERATION SYSTEM LEVEL THE USER NOT WANTS ANIMATIONS! DOT! THIS IS SUPER EASY FACT...
The problem is: if motion reduced in OS level you need to play all animations with ZERO time otherwise functions (that uses animations) will be crashed. Now all animations playing with zero time. This solution is working on all platform on all major browsers (Safari, Chrome, Firefox, Edge).
The UNSET method is not working (now and forever).

Helpful information for you:
https://developer.paciellogroup.com/blog/2019/05/short-note-on-prefers-reduced-motion-and-puzzled-windows-users/

[warengonzaga]

@sivot alright, thanks for the awesome reference!

[clinville2003]

I'm on Windows 10, Chrome 79. I was experiencing no animation (after it had worked), while others in the office, who are also on Chrome 79 and Windows 10, would get animation. I typed Ease Of Access Display Settings in the menu. My "Show animations in Windows" was on but I turned it off and back on. That seemed to trip some other setting. Now it works.

[rozhdestvenskiy]

Folks,

I'm using Win 7 and Chrome 80.x. I've always selected "Adjust for best performance" setting which unchecked all checkboxes on Visual Effects tab. I just tried to enable only "Fade or slide ToolTips in view" and it didn't work. I checked it here - https://codepen.io/badboy/full/eavwRg. I played with options and currently I have only one option enabled which is the very first one "Animate controls and elements inside windows" and I can confirm that animation (https://daneden.github.io/animate.css/ and https://codepen.io/badboy/full/eavwRg) works fine!

[dziku86]

@rozhdestvenskiy

Folks,

I'm using Win 7 and Chrome 80.x. I've always selected "Adjust for best performance" setting which unchecked all checkboxes on Visual Effects tab. I just tried to enable only "Fade or slide ToolTips in view" and it didn't work. I checked it here - https://codepen.io/badboy/full/eavwRg. I played with options and currently I have only one option enabled which is the very first one "Animate controls and elements inside windows" and I can confirm that animation (https://daneden.github.io/animate.css/ and https://codepen.io/badboy/full/eavwRg) works fine!

I filed a bug with this one https://bugs.chromium.org/p/chromium/issues/detail?id=1197680