关键帧动画在 Wordpress 中不起作用答案

【问题标题】：Keyframe animation not working in Wordpress关键帧动画在 Wordpress 中不起作用
【发布时间】：2020-09-11 02:23:04
【问题描述】：

我正在尝试让动画在 wordpress 中的伪元素上运行。我无法弄清楚为什么它不起作用。

但是，此动画在 CodeIgnite 网络中正常运行。

代码是：

CSS：

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

HTML：<i class="fa-li fa fa-check-square-o wow fadeInLeft" data-wow-delay="1.5s" data-wow-duration="0.4s" ></i>

【问题讨论】：

请创建一个minimal reproducible example，其中包含显示问题的所有相关代码。这里没有关键帧或任何类型动画的代码，当我们看不到它时，我们无法修复代码中的问题！
你在functions.php文件中调用了wow库和css动画库吗？
@EmAn 是的，在 functios.php 中调用了 wow 和 animate 库，但没有出现效果。
写这个页面末尾的 html

标签： html css css-animations keyframe

【解决方案1】：

`Animation property`

尝试添加动画持续时间

-webkit-animation: fadeInLeft 2s infinite;

animation: fadeInLeft 2s infinite;

.fadeInLeft {
  -webkit-animation: fadeInLeft 2s infinite;
  animation: fadeInLeft 2s infinite;
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i class=" fa fa-check-square-o wow fadeInLeft" data-wow-delay="1.5s" data-wow-duration="0.4s" ></i>

【讨论】：

我添加了infinite 以查看演示 :) 希望这有效
是的，我试过了，这可行，但动画与我正在寻找的不一样。我有一个包含不同很棒图标的列表，我希望动画对每个图标都有不同的延迟。我需要为每个动画制作不同的动画吗？

【解决方案2】：

animation-duration 属性定义动画完成所需的时间。如果未指定 animation-duration 属性（如您提供的代码），则不会出现动画，因为默认值为 0s（0 秒）。

您可以在MDN上阅读更多内容

【讨论】：