animate.css is not working in Chrome latest version (Version above 73)
Question
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.)
7 answers
solution1
12 2019-05-10 08:10:15
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 .
solution2
9 2019-06-21 16:14:17
You have to Adjust the Windows Visual performance settings.
See screenshot. adjust visual settings windows 10
solution3
5 2020-03-16 15:18:16
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;
}
}
solution4
2 2019-08-28 09:53:18
自 animate.css v3.7.1 起已修复，更多详情请见： https : //github.com/daneden/animate.css/pull/931
solution5
0 2019-05-07 12:22:09
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>
solution6
0 2020-12-23 14:42:04
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;
}
}
solution7
0 2021-06-16 20:53:49
当您下载文件时，您会得到 3 个 css 文件，即 (animate.css,animate.min.css,animate.compact.css) 只需将 animate.compact.css 文件复制到您的 css 项目文件夹中，然后将其链接起来，不要更改任何内容这会起作用..下载后，这是您应该拥有的，标记的就是我所说的
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.