Hi tomcatsk, is it your site? Are you using the file directly on the same server, or on a different server, such as the CDN mentioned on Github:

https://github.com/daneden/animate.css#usage

Web Console

You could check for messages in Firefox's Web Console. You can open the Web Console in the lower part of the tab using either:

• "3-bar" menu button > Web Developer > Web Console
• (menu bar) Tools > Web Developer > Web Console
• (Windows) Ctrl+Shift+k

Then reload the page in the upper part of the tab and watch for error or security messages. Anything that sounds like it could be relevant? You may need to click some of the filter buttons to see CSS-specific and file loading messages.

Routine Troubleshooting

If a site is generally known to work in Firefox, these are standard suggestions to try when it stops working normally:

Double-check content blockers: Firefox's Content Blocking feature and extensions that counter ads and tracking may break websites that embed third party content (meaning, from a secondary server).

(A) Do you see a shield icon toward the left end of the address bar, near the lock icon? More info on managing the Tracking Protection feature in this article: What happened to Tracking Protection?.

(B) Extensions such as Adblock Plus, Blur, Disconnect, Ghostery, NoScript, Privacy Badger, uBlock Origin or uMatrix should provide toolbar buttons to manage blocked content in a page. There may or may not be a number on the icon indicating the number of blocked items; you may need to click the button to see what's going on and test whether you need to make an exception for this site.

Cache and Cookies: When you have a problem with one particular site, a good "first thing to try" is clearing your Firefox cache and deleting your saved cookies for the site.

(1) Clear Firefox's Cache

See: How to clear the Firefox cache

If you have a large hard drive, this might take a few minutes.

(2) Remove the site's cookies (save any pending work first). While viewing a page on the site, try either:

• right-click (on Mac Ctrl+click) a blank area of the page and choose View Page Info > Security > "Clear Cookies and Site Data"
• (menu bar) Tools > Page Info > Security > "Clear Cookies and Site Data"
• click the padlock or "i" icon in the address bar, then the ">" button, then More Information, and finally the "Clear Cookies and Site Data" button

In the dialog that opens, you will see one or more matches to the current address so you can remove the site's cookies individually without affecting other sites.

Then try reloading the page. Does that help?

Testing in Firefox's Safe Mode: In its Safe Mode, Firefox temporarily deactivates extensions, hardware acceleration, and some other advanced features to help you assess whether these are causing the problem.

If Firefox is not running: Hold down the Shift key when starting Firefox. (On Mac, hold down the option/alt key instead of the Shift key.)

If Firefox is running: You can restart Firefox in Safe Mode using either:

• "3-bar" menu button > "?" Help > Restart with Add-ons Disabled
• (menu bar) Help menu > Restart with Add-ons Disabled

and OK the restart.

Both scenarios: A small dialog should appear. Click "Start in Safe Mode" (not Refresh).

Any improvement?

For what it is worth, I'm not seeing the animation as well on that test page in Firefox 66. I only see the animation that changes the HUE, but not the effect.

I do see the main animation in Firefox 60 ESR, so it is possible that the code needs an update for current Firefox releases.

cor-el said

For what it is worth, I'm not seeing the animation as well on that test page in Firefox 66.

The rule

-webkit-animation: bounceInUp 1s;

on the main parts of the page should cause it to slide up and bounce when it hits position.

The Animate It button doesn't seem to work as intended. The span#animationSandbox gets the revised class name but doesn't move. I don't know jQuery well enough to read the entire testAnim() function, but it is applying animation:unset and -webkit-animation:unset when I assume it should be setting the value specified by the user. ??

thanks for your replies but it didn't help me I copied this page to ntb of my son who has the same version of Firefox and all work fine, I don't understand where is problem. I tried all your recomendations but without result

Sorry, what does this mean:

tomcatsk said

I copied this page to ntb of my son who has the same version of Firefox and all work fine, I don't understand where is problem.

Is the problem with that Github page, or is the problem on a webpage you are creating?

with both :(

I think the effects can work, but there is a problem with the demo page. For example, if I pick an animation and then open Firefox's Web Console and paste the following script command and press Enter to run it, the header section is animated for a second:

document.querySelector('header').setAttribute('style', 'animation: 1s ease 0s 1 normal none running ' + document.querySelector('.js--animations').value);

Note: The first time you paste a script into the web console and press Enter to run it, Firefox may ask you to take a step to prove you understand it is dangerous to run scripts from strangers (which is true).

Do you want to share a link for the page where you are trying to use the animate.css library?

OK. This seems to be caused by Firefox supporting reduced motion media rules.

The @keyframe part is 57 KB, so I hadn't notice this @media rule at the end.

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

You can create a new Integer pref on the about:config page to make this animation work.

• ui.prefersReducedMotion = 0

You can open the about:config page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue.

• http://kb.mozillazine.org/about:config

See also:

• Bug 1478597 - Remove toolkit.cosmeticAnimations.enabled in favor of prefers-reduced-motion media query
• https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion

I think the problem with the page is related to this section at the bottom of the css file:

https://github.com/daneden/animate.css/blob/master/animate.css#L3616

The animations are suppressed if the browser says the user "prefers reduced motion", which started being observed in Firefox 63 according to

https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion

But... where did I say I prefer reduced motion? That MDN page says the "user has notified the system that they prefer an interface that minimizes the amount of movement or animation." So this is a Windows setting? Hmm...

Yes, I had turned off Windows animations (attached screenshot). If I turn them back on, the test page animates like crazy.

So the CSS was designed to respect the user's OS-level animation preference, and I guess it's up to you whether to keep that in the CSS file.

Great! All animations on my page are working and demo on github is working too. Good job. Thanks.

See also:

• Bug 1524874 - The preference for prefers-reduced-motion should be boolean instead of integer

(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)

Once again, jscher2000 and cor-el I thank you for your ideas. And jscher2000, yes other solution of this problem is change setting on windows system level - “Turn off all unnecessary animations (when possible).” But I think that better solution for me is new setting in about:config. Or no? What do you think about it guys?

I personally do not want Windows-level animations; I think they are a waste of CPU cycles.

For your site, how important is it that other users be able to see the animations? It would be inconvenient for your users to have to change any settings.

You are right, the best solution will be remove these rows from animate.css

@media (print), (prefers-reduced-motion) {

 .animated {
   -webkit-animation: unset !important;
   animation: unset !important;
   -webkit-transition: none !important;
   transition: none !important;
 }

}

You can leave the rule for (print) and only remove (prefers-reduced-motion). Note that not all visitors may like animations and I don't know what animations you have in mind, but be aware that this is an accessibility feature meant for people that have a problem with motion on web pages.

• https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion

• [/questions/1231873] Any way to complete a page's animations *before* reading it?