曾经努力使用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中的“技能”
答案 0 :(得分:0)
现在可以使用,解决方案发布在下面
`.test,
.test::after {
animation-delay: 0ms;
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);
}
.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;
color: $grey;
white-space: nowrap;
cursor: default;
}
.js-dipper-animate {
position: relative;
animation-name: clip-text;
color: $grey;
white-space: nowrap;
cursor: default;
opacity: 1;
&::after {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $grey;
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
animation-name: text-revealer;
opacity: 1;
}
}`