0
section_swipe = document.querySelectorAll("p.swipe")
section_swipe.forEach((v) => {
setInterval(() => v.classList.toggle('revealed'), 3000)
})p.swipe {
height: auto;
padding: 1vh;
text-align: center;
position: relative;
overflow: hidden;
width: 100%;
}
.bar {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.content {
color: rgba(0, 0, 0, 0);
display: inline-block;
}
.revealed .bar {
transform: translate(100%, 0%) translate3d(0px, 0px, 0px);
background: #232323;
}
.revealed .content {
animation-duration: 1s;
animation-name: reveal_section;
color: #232323;
}
@keyframes reveal_section {
0% {
color: rgba(0, 0, 0, 0);
}
50% {
color: rgba(0, 0, 0, 0);
}
51% {
color: #232323;
}
100% {
color: #232323;
}
}
.bar:nth-of-type(even) {
transition-delay: 1s;
}
.content:nth-of-type(even) {
animation-delay: 1s;
}<div>
<p class="swipe">
<span class="content">
Hello</span>
<span class="bar"></span>
</p>
<p class="swipe">
<span class="content">World</span><span class="bar"></span>
</p>
</div>私はバーの移行をしたいと「こんにちは」と同時にわずかな遅れはなく後に開始する「世界」のアニメーションを明らかにしました。私はnth-of-typeを使用しようとしましたが、単に '世界'の代わりに両方を遅らせることが効果的でした。コンテンツの公開アニメーションも、バーの遅延と同期している必要があります。 2つではなく、複数の要素で動作する必要があります。