Animate css не работает в браузере
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).
The text was updated successfully, but these errors were encountered:
eltonmesquita commented Apr 24, 2019
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.
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,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) :
- Press Win+R to open the Run dialog.
- Type in sysdm.cpl and press enter to launch windows settings pannel
- In the dialog windows that opens, click the Advanced tab.
- Choose Custom and then checked 'Fade or Slide ToolTips in view'
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 .
eltonmesquita commented Apr 25, 2019
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 commented Apr 25, 2019
@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 commented May 1, 2019
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 commented May 8, 2019
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.
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 commented May 9, 2019
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 commented May 10, 2019
yellow1912 commented May 16, 2019
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 commented May 16, 2019
Solution committed, we are waiting for merge it to a release. You can check in pull requests.
Temporary solution until new release published:
rendy44 commented May 18, 2019
@sivot Does not work either on Chrome 74 windows.
toviszsolt commented May 18, 2019
@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 commented May 18, 2019
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 commented May 21, 2019
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 commented May 21, 2019
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.
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 commented May 24, 2019
@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.
UP2044856 commented May 24, 2019
- 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.
- 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 commented May 29, 2019
WarenGonzaga commented May 29, 2019
See guys? I said earlier that @eltonmesquita is working on the new version with this fix. hehe
Читайте также: