一直在努力使用 waypoints.js 在滚动上复制 css 动画
这是动画：https ://codepen.io/equinusocio/pen/KNYOxJ
<h1 class="reveal-text">
I'm here.
</h1>
:root {
--animation-delay: 0;
--duration: 800ms;
--iterations: 1;
}
/* ••·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */
.reveal-text,
.reveal-text::after {
animation-delay: var(--animation-delay, 2s);
animation-iteration-count: var(--iterations, 1);
animation-duration: var(--duration, 800ms);
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text {
position: relative;
font-size: 10vw;
animation-name: clip-text;
color: #FFF;
white-space: nowrap;
cursor: default;
&::after {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f2f98b;
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
animation-name: text-revealer;
}
}
@keyframes clip-text {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes text-revealer {
0%, 50% {
transform-origin: 0 50%;
}
60%, 100% {
transform-origin: 100% 50%;
}
60% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
这是我尝试将它与航点一起使用的尝试..
.test {
display: flex;
margin: 15px;
margin-top: 5em;
display: flex;
align-self: center;
justify-content: center;
align-content: center;
text-align: center;
opacity: 0;
position: relative;
animation-name: clip-text;
color: $grey;
white-space: nowrap;
cursor: default;
}
.js-dipper-animate {
opacity: 1;
animation-name: text-revealer;
content: "";
z-index: 999;
background-color: $grey;
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
}
这是输出的 gif：https ://imgur.com/waCcprF 如您所见，动画播放但没有文本。它应该显示“测试”。动画播放后，我希望能够看到文本，例如显示的 gif 中的“技能”