显示函数或关键帧动画css在Wordpress中不起作用

Question

我正试图在wordpress中的page元素上运行一个动画。我不明白为什么它不起作用。我在新的橡皮布页面中添加了这个代码。我想在滚动到该部分时加载该部分，内容加载时使用动画但是，此动画在visual studio代码中工作正常。

代码为：

CSS：

section1 {
min-height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.reveal {
position: relative;
opacity: 0;
}
.reveal.active {
opacity: 1;
}

.active.fade-right {
animation: fade-right 1s ease-in;
-webkit-animation: fade-right 1s ease-in;

}
@keyframes fade-right {
0% {
transform: translateX(200px);
-webkit-transform: translateX(200px);
opacity: 0;
}
100% {
transform: translateX(-100px);
-webkit-transform: translateX(-100px);
opacity: 1;
}
}

脚本：

function reveal() {
var reveals = document.querySelectorAll(".reveal");

for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;

if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}

html:

<section class="section1">
<h1>Scroll Down to Reveal Elements &#8595;</h1>
</section>

<section class="section1">
<div class="container reveal fade-right">
<h4>Caption</h4>

<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>    
</div> 
</div>
</section>

Answer 1

我发现了解决这种情况的诀窍。我在内联中插入了样式代码。现在我通过外部链接插入我的样式表，WordPress页面中的动画对我来说很好。wordpress中的经典页面生成器禁用@keyframe和动画。