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

问题描述

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

但是，此动画在CodeIgnite网站中正常工作。

代码是：

CSS：

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%,0);
    transform: translate3d(-100%,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>

解决方法

animation-duration属性定义动画需要多长时间才能完成。如果未指定animation-duration属性（例如您提供的代码），则不会发生动画，因为默认值为0s（0秒）。

您可以在MDN

上阅读更多内容 ,

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);
    transform: translate3d(-100%,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>