animate.css 在 Chrome 最新版本（73 以上版本）中不起作用答案

【问题标题】：animate.css is not working in Chrome latest version (Version above 73)animate.css 在 Chrome 最新版本（73 以上版本）中不起作用
【发布时间】：2019-09-25 02:38:42
【问题描述】：

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

这是 animate.css 的链接，它在我的浏览器（Chrome、Firefox 等）上没有显示任何动画效果

【问题讨论】：

发布您的动画代码（Html 代码）
你介意接受我的回答吗？

标签： javascript jquery css

【解决方案1】：

当我更新我的 Chrome 浏览器时，同样的事情发生在我身上。您需要更改 Windows 的 Performance Options 下的设置。要打开性能选项，您可以搜索调整窗口的外观和性能 或：

Windows 键 + R
输入%windir%\system32\SystemPropertiesPerformance.exe

然后将所选设置更改为调整以获得最佳外观。

【讨论】：

【解决方案2】：

您必须调整 Windows Visual 性能设置。

见截图。 adjust visual settings windows 10

【讨论】：

救了我的命，你真是个天才！

【解决方案3】：

从 v3.7.0 及更高版本开始，Animate.css 支持 prefers-reduced-motion CSS 媒体功能。要禁用它，您必须在 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;
    }
}

【讨论】：

好！我只是压制“，（prefers-reduced-motion：reduce）”和animate.css工作...... 1小时的研究......谢谢！ - 注意：动画可能是愚蠢的东西，但对于许多客户来说，它是现代主义的标志......

【解决方案4】：

自 animate.css v3.7.1 起已修复，更多详细信息请参见：https://github.com/daneden/animate.css/pull/931

【讨论】：

已修复，无论如何感谢您的帮助...问题出在“Windows 视觉性能设置”中。请往上看
@PrasanthS，更改“Windows 视觉性能设置”中的设置是一种解决方法。我在 Linux 上遇到了同样的问题，并且显然没有“Windows 视觉性能”。真正的问题在于 animate.css 如何处理减少运动的环境。查看上面的 github 链接了解更多详情。
实际上在 OSX10.12、CHROME 79.0.39 和 animate.css 3.7.2 上对我不起作用在 chrome 更新之前它起作用了，但我不知道我拥有的最后一个版本

【解决方案5】：

在您的代码中使用https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css css 制作动画。

这是我的代码

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

【讨论】：

我的项目中已经有 animate.css 文件。所以我认为不需要添加 CDN 对吗？无论如何我尝试使用此 CDN 但它不起作用。
你能把代码粘贴到这里吗？那么到底是什么问题呢？
我不知道是什么问题，你提供的这个 js fiddle 中的动画在我的浏览器上不起作用。无论如何感谢您的支持。

【解决方案6】：

在您的 * animate.css 文件中注释/删除这些代码 - 版本 - 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;
  }
}

【讨论】：

【解决方案7】：

当您下载文件时，您会获得 3 个 css 文件（animate.css、animate.min.css、animate.compact.css）只需将 animate.compact.css 文件复制到您的 css 项目文件夹中，然后链接它不会改变任何可行的东西..after your download this is what you should have and the marked one is what i am talking about

【讨论】：