X
Tap here to go to the mobile version of the site.

Support Forum

animate.css doesn't work in my firefox

Posted

I don't understand why animate.css doesn't work in my firefox. Where can be problem? In firefox on another pc animate.css is working. animate.css - https://daneden.github.io/animate.css/

I don't understand why animate.css doesn't work in my firefox. Where can be problem? In firefox on another pc animate.css is working. animate.css - https://daneden.github.io/animate.css/
Quote

Additional System Details

Installed Plug-ins

  • Shockwave Flash 32.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

More Information

jscher2000
  • Top 10 Contributor
8637 solutions 70648 answers

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?

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: [[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?
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17416 solutions 157342 answers

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.

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.
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8637 solutions 70648 answers

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. ??

''cor-el [[#answer-1208835|said]]'' <blockquote> For what it is worth, I'm not seeing the animation as well on that test page in Firefox 66. </blockquote> 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. ??
Was this helpful to you?
Quote

Question owner

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

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
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8637 solutions 70648 answers

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?

Sorry, what does this mean: ''tomcatsk [[#answer-1208851|said]]'' <blockquote> 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. </blockquote> Is the problem with that Github page, or is the problem on a webpage you are creating?
Was this helpful to you?
Quote

Question owner

with both :(

with both :(
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8637 solutions 70648 answers

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?

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: <code>document.querySelector('header').setAttribute('style', 'animation: 1s ease 0s 1 normal none running ' + document.querySelector('.js--animations').value);</code> ''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?
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17416 solutions 157342 answers

Helpful Reply

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.

See also:

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. <pre>@media (prefers-reduced-motion),(print){ .animated{-webkit-animation:unset!important; -webkit-transition:none!important; animation:unset!important; transition:none!important }}</pre> ----- You can create a new Integer pref on the <b>about:config</b> page to make this animation work. *ui.prefersReducedMotion = 0 You can open the <b>about:config</b> 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: *[https://bugzilla.mozilla.org/show_bug.cgi?id=1478597 Bug 1478597] - Remove toolkit.cosmeticAnimations.enabled in favor of prefers-reduced-motion media query *https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion

Modified by cor-el

Was this helpful to you? 1
Quote
jscher2000
  • Top 10 Contributor
8637 solutions 70648 answers

Helpful Reply

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.

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.
Was this helpful to you? 1
Quote

Question owner

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

Great! All animations on my page are working and demo on github is working too. Good job. Thanks.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17416 solutions 157342 answers

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
)

See also: *[https://bugzilla.mozilla.org/show_bug.cgi?id=1524874 Bug 1524874] - The preference for prefers-reduced-motion should be boolean instead of integer (<i>please do not comment in bug reports<br>https://bugzilla.mozilla.org/page.cgi?id=etiquette.html</i>)
Was this helpful to you?
Quote

Question owner

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?

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?
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8637 solutions 70648 answers

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.

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.
Was this helpful to you?
Quote

Question owner

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 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; } }
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17416 solutions 157342 answers

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.

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?
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.