Question

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

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

请给我有关此问题的任何解决方案。

预先感谢

Answer 1

从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;
    }
}

Answer 2

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

查看屏幕截图。 adjust visual settings windows 10

Answer 3

自animate.css v3.7.1开始修复，此处有更多详细信息：https://github.com/daneden/animate.css/pull/931

Answer 4

在代码中使用C:\Windows\panther\ CSS作为动画。

这是我的代码

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

Answer 5

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

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

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

Answer 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;
  }
}

Answer 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

animate.css无法在chrome最新版本中使用（73以上版本）

7 个答案: