如何解决关键帧动画在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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。