animate.css is not working in Chrome latest version (Version above 73)

问题

https://daneden.github.io/animate.css/

This is the link of animate.css, It doesn't show any animation effect on my browser (Chrome, Firefox etc.)

回答1:

The same thing happened to me when I updated my Chrome browser. You need to change the settings under the Performance Options of your Windows. To open Performance Options you may search for Adjust the appearance and performance of windows or:

Windows key + R
Enter %windir%\system32\SystemPropertiesPerformance.exe

Then change the selected settings to Adjust for best appearance.

回答2:

You have to Adjust the Windows Visual performance settings.

See screenshot. adjust visual settings windows 10

回答3:

From v3.7.0 and up Animate.css supports the prefers-reduced-motion CSS media feature. To disable it you have to remove/comment following in animate.css

@media (print), (prefers-reduced-motion: reduce) {
    .animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }
}

回答4:

Fixed since animate.css v3.7.1, more details here: https://github.com/daneden/animate.css/pull/931

回答5:

Use https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css css for animation in your code.

This is my code

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/>
</head>
<body>
<h2 class="animated slideInLeft" style="animation-delay:1s">Your ultimate Solution</h2>
</body>
</html>

回答6:

Comment/Remove these codes In your * animate.css file - Version - 4.1.1

@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}

来源：https://stackoverflow.com/questions/56022493/animate-css-is-not-working-in-chrome-latest-version-version-above-73

标签

javascript

jquery

css