我有一个 css 动画(缝合)，它通过 scrollTop 函数用 jQuery 触发(本质上是在粘性元素粘住时触发，这是我能找到的唯一方法)。但是，如果我向上滚动(触发jQuery将css重置回原始状态)，然后向下滚动以再次触发，则动画不会播放，而是直接转到其结束帧(空白)。
理想情况下，我想实现的目标：
动画在被"卡住"之前停留在它的第一帧上，然后一旦卡住，动画播放一次并在其最后一帧(空白)上结束。当动画再次变得"未卡住"时(无论是向上滚动还是向下滚动，它的"粘滞区域"，动画都会反向播放并再次停留在第一帧上。
谁能帮助我接近实现这一目标，或者至少解决我最初的问题？
链接到代码笔最小(尽可能)可重现的示例：
https://codepen.io/noodlesontoast/pen/rXaxPK
我已经尝试了各种动画属性设置组合，找不到任何有效的。
$(document).ready(function() {
var button = $(".her-panel"); //get offset of second div
var offset = button.offset().top - 80; //check for top property
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() >= offset) {
$(".her-stitch").css("animation-play-state","running");
$(".her-stitch").css("animation-fill-mode","forwards");
} else if ($(window).scrollTop() < offset) {
$(".her-stitch").css("animation-play-state","paused");
$(".her-stitch").css("animation-fill-mode","none");
}
});
});
});
$(document).ready(function() {
var button = $(".colour-song"); //get offset of second div
var offset = button.offset().top - 80; //check for top property
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() >= offset) {
$(".colour-song-stitch").css("animation-play-state","running");
$(".colour-song-stitch").css("animation-fill-mode","forwards");
} else if ($(window).scrollTop() < offset) {
$(".colour-song-stitch").css("animation-play-state","paused");
$(".colour-song-stitch").css("animation-fill-mode","none");
}
});
});
});#collections-section {
position: relative;
z-index: 1;
width: 100%;
height: 4000px;
background-color: rgba(0, 0, 0, .1);
}
#collections-section .section-header {
margin-bottom: calc(30px + 1%);
}
#collections-section .section-header .section-header-line {
height: 1px;
width: calc(100% - 80px);
margin-left: 40px;
margin-right: 40px;
background-color: #b3b3b3;
}
#collections-section .section-header .section-header {
padding-top: 22px;
font: 600 14.5px basic-sans, sans-serif;
margin-left: 40px;
}
#collections-section .feature-photo-container {
max-width: 62%;
min-width: 400px;
height: 1200px;
background-color: grey;
z-index: -1;
}
#collections-section .feature-photo-container img {
width: 100%;
height: 1200px;
z-index: -1;
}
#collections-section .collection-containers {
width: calc(100% - 40px);
position: relative;
}
#collections-section .collection-containers .panel-container-allow-sliding {
width: calc(44%);
min-width: calc(520px);
position: absolute;
height: 90%;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel {
position: sticky;
position: -webkit-sticky;
top: 80px;
background-color: #fad9d2;
width: calc(100% - 100px);
height: calc(340px - 100px);
padding: 50px;
margin-top: 80px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.attention-line {
height: 2px;
width: 30px;
background-color: #333333;
margin-bottom: 15px;
margin-top: 10px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
h3 {
width: auto;
font: 200 2.6rem Ogg-Roman, serif;
margin-bottom: 10px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
p {
font: 200 1rem basic-sans, sans-serif;
line-height: 27px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.link-box-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
bottom: 13%;
text-align: center;
font: 600 14.5px basic-sans, sans-serif;
height: 40px;
width: 100px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.link-box-container:hover
> .highlight-box {
height: 30px;
top: -20%;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.link-box-container
.button-text {
z-index: 10;
color: #ff7883;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.link-box-container
.button-text
span {
color: #333333;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.link-box-container
.highlight-box {
position: absolute;
top: 50%;
width: 96px;
height: 15px;
background-color: white;
z-index: 0;
-webkit-transition: height 0.2s, top 0.2s;
/* Safari */
transition: height 0.2s, top 0.2s;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation {
position: absolute;
width: 75px;
height: 75px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.her-stitch,
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.colour-song-stitch {
transform: rotate(45deg);
display: inline-block;
background-color: white;
position: absolute;
margin: 0 0 10px 0;
width: 15.8px;
height: 2.015px;
opacity: 1;
animation-duration: 0.5s;
animation-timing-function: steps(7);
animation-play-state: paused;
animation-fill-mode: none;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.stitch-1 {
animation-name: move-in-steps1;
top: calc(0% + 6px);
left: 0;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.stitch-2 {
animation-name: move-in-steps2;
top: calc(20% + 6px);
left: 20%;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.stitch-3 {
animation-name: move-in-steps3;
top: calc(40% + 6px);
left: 40%;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.stitch-4 {
animation-name: move-in-steps4;
top: calc(60% + 6px);
left: 60%;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.stitch-5 {
animation-name: move-in-steps5;
top: calc(80% + 6px);
left: 80%;
}
@keyframes move-in-steps1 {
0% {
opacity: 1;
}
16% {
opacity: 1;
}
33% {
opacity: 1;
}
49% {
opacity: 1;
}
66% {
opacity: 1;
}
80% {
opacity: 1;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes move-in-steps2 {
0% {
opacity: 1;
}
16% {
opacity: 1;
}
33% {
opacity: 1;
}
49% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes move-in-steps3 {
0% {
opacity: 1;
}
16% {
opacity: 1;
}
33% {
opacity: 1;
}
48% {
opacity: 1;
}
49% {
opacity: 0;
}
66% {
opacity: 0;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes move-in-steps4 {
0% {
opacity: 1;
}
16% {
opacity: 1;
}
32% {
opacity: 1;
}
33% {
opacity: 0;
}
49% {
opacity: 0;
}
66% {
opacity: 0;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes move-in-steps5 {
0% {
opacity: 1;
}
15% {
opacity: 1;
}
16% {
opacity: 0;
}
33% {
opacity: 0;
}
49% {
opacity: 0;
}
66% {
opacity: 0;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#collections-section .her-container {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-start;
margin-left: 40px;
margin-bottom: 5%;
z-index: 2;
}
#collections-section .her-container .panel-container-allow-sliding {
left: 0;
}
#collections-section
.her-container
.panel-container-allow-sliding
.info-panel
p {
width: 320px;
}
#collections-section
.her-container
.panel-container-allow-sliding
.info-panel
.button-text {
margin-right: -17px;
}
#collections-section
.her-container
.panel-container-allow-sliding
.info-panel
.link-box-container {
right: 55px;
}
#collections-section
.her-container
.panel-container-allow-sliding
.info-panel
.link-box-container
.highlight-box {
left: 11px;
}
#collections-section
.her-container
.panel-container-allow-sliding
.info-panel
.her-stitches {
right: -20px;
top: -22px;
}
#collections-section .colour-song-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
margin-right: 40px;
}
#collections-section .colour-song-container .panel-container-allow-sliding {
right: 0;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
p {
width: 360px;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
.button-text {
margin-right: -17px;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
.colour-song-stitch {
left: -20px;
top: -20px;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
.link-box-container {
right: 60px;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
.link-box-container
.highlight-box {
right: -6.5px;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
.colour-song-stitches {
left: -20px;
top: -20px;
transform: rotate(90deg);
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id="collections-section">
<div class="section-header">
<div class="section-header-line">
</div>
<div class="section-header">Collections
</div>
</div>
<div class="collection-containers her-container">
<div class="panel-container-allow-sliding">
<div class="info-panel her-panel">
<div class="attention-line">
</div>
<h3>Her.</h3>
<p>Her feminine divinity draws me like a moth to the light, it has a
hold on my soul and I want to laugh and cry at the same time.</p>
<a class="link-box-container" href="https://www.reddit.com">
<div class="button-text">Explore More</div>
<div class="highlight-box"></div>
</a>
<div class="stitch-animation her-stitches">
<div class="her-stitch stitch-1"></div>
<div class="her-stitch stitch-2"></div>
<div class="her-stitch stitch-3"></div>
<div class="her-stitch stitch-4"></div>
<div class="her-stitch stitch-5"></div>
</div>
</div>
</div>
<div class="feature-photo-container">
<img src="images/collection-her-hero.jpg" alt="Grey Dress With Frills">
</div>
</div>
<div class="collection-containers colour-song-container">
<div class="panel-container-allow-sliding">
<div class="info-panel colour-song">
<div class="attention-line">
</div>
<h3>The Colour Song.</h3>
<p>It is the lyrics to our childhood song, where colour is a feeling,
a flavour, knowing no bounds and there’s no such thing as a
mute button.</p>
<a class="link-box-container" href="https://www.reddit.com">
<div class="button-text">Explore More</div>
<div class="highlight-box"></div>
</a>
<div class="stitch-animation colour-song-stitches">
<div class="colour-song-stitch stitch-1"></div>
<div class="colour-song-stitch stitch-2"></div>
<div class="colour-song-stitch stitch-3"></div>
<div class="colour-song-stitch stitch-4"></div>
<div class="colour-song-stitch stitch-5"></div>
</div>
</div>
</div>
<div class="feature-photo-container">
<img src="images/collection-colour-song-hero.jpg" alt="Orange Dress With Frills">
</div>
</div>
</div>问题是CSS动画不会简单地重置。您可以使用多个选项来重置它，我在下面显示了在每次"重置"后删除和重新添加动画元素的选项。
var holder = $('.her-stitches').html();
$('.her-stitches').html('').html(holder);
$(document).ready(function() {
var button = $(".her-panel"); //get offset of second div
var offset = button.offset().top - 80; //check for top property
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() >= offset) {
$(".her-stitch").css("animation-play-state","running");
$(".her-stitch").css("animation-fill-mode","forwards");
} else if ($(window).scrollTop() < offset) {
var holder = $('.her-stitches').html();
$('.her-stitches').html('').html(holder);
$(".her-stitch").css("animation-play-state","paused");
$(".her-stitch").css("animation-fill-mode","none");
}
});
});
});#collections-section {
position: relative;
z-index: 1;
width: 100%;
height: 4000px;
background-color: rgba(0, 0, 0, .1);
}
#collections-section .section-header {
margin-bottom: calc(30px + 1%);
}
#collections-section .section-header .section-header-line {
height: 1px;
width: calc(100% - 80px);
margin-left: 40px;
margin-right: 40px;
background-color: #b3b3b3;
}
#collections-section .section-header .section-header {
padding-top: 22px;
font: 600 14.5px basic-sans, sans-serif;
margin-left: 40px;
}
#collections-section .feature-photo-container {
max-width: 62%;
min-width: 400px;
height: 1200px;
background-color: grey;
z-index: -1;
}
#collections-section .feature-photo-container img {
width: 100%;
height: 1200px;
z-index: -1;
}
#collections-section .collection-containers {
width: calc(100% - 40px);
position: relative;
}
#collections-section .collection-containers .panel-container-allow-sliding {
width: calc(44%);
min-width: calc(520px);
position: absolute;
height: 90%;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel {
position: sticky;
position: -webkit-sticky;
top: 80px;
background-color: #fad9d2;
width: calc(100% - 100px);
height: calc(340px - 100px);
padding: 50px;
margin-top: 80px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.attention-line {
height: 2px;
width: 30px;
background-color: #333333;
margin-bottom: 15px;
margin-top: 10px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
h3 {
width: auto;
font: 200 2.6rem Ogg-Roman, serif;
margin-bottom: 10px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
p {
font: 200 1rem basic-sans, sans-serif;
line-height: 27px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.link-box-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
bottom: 13%;
text-align: center;
font: 600 14.5px basic-sans, sans-serif;
height: 40px;
width: 100px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.link-box-container:hover
> .highlight-box {
height: 30px;
top: -20%;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.link-box-container
.button-text {
z-index: 10;
color: #ff7883;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.link-box-container
.button-text
span {
color: #333333;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.link-box-container
.highlight-box {
position: absolute;
top: 50%;
width: 96px;
height: 15px;
background-color: white;
z-index: 0;
-webkit-transition: height 0.2s, top 0.2s;
/* Safari */
transition: height 0.2s, top 0.2s;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation {
position: absolute;
width: 75px;
height: 75px;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.her-stitch,
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.colour-song-stitch {
transform: rotate(45deg);
display: inline-block;
background-color: white;
position: absolute;
margin: 0 0 10px 0;
width: 15.8px;
height: 2.015px;
opacity: 1;
animation-duration: 0.5s;
animation-timing-function: steps(7);
animation-play-state: paused;
animation-fill-mode: none;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.stitch-1 {
animation-name: move-in-steps1;
top: calc(0% + 6px);
left: 0;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.stitch-2 {
animation-name: move-in-steps2;
top: calc(20% + 6px);
left: 20%;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.stitch-3 {
animation-name: move-in-steps3;
top: calc(40% + 6px);
left: 40%;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.stitch-4 {
animation-name: move-in-steps4;
top: calc(60% + 6px);
left: 60%;
}
#collections-section
.collection-containers
.panel-container-allow-sliding
.info-panel
.stitch-animation
.stitch-5 {
animation-name: move-in-steps5;
top: calc(80% + 6px);
left: 80%;
}
@keyframes move-in-steps1 {
0% {
opacity: 1;
}
16% {
opacity: 1;
}
33% {
opacity: 1;
}
49% {
opacity: 1;
}
66% {
opacity: 1;
}
80% {
opacity: 1;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes move-in-steps2 {
0% {
opacity: 1;
}
16% {
opacity: 1;
}
33% {
opacity: 1;
}
49% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes move-in-steps3 {
0% {
opacity: 1;
}
16% {
opacity: 1;
}
33% {
opacity: 1;
}
48% {
opacity: 1;
}
49% {
opacity: 0;
}
66% {
opacity: 0;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes move-in-steps4 {
0% {
opacity: 1;
}
16% {
opacity: 1;
}
32% {
opacity: 1;
}
33% {
opacity: 0;
}
49% {
opacity: 0;
}
66% {
opacity: 0;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes move-in-steps5 {
0% {
opacity: 1;
}
15% {
opacity: 1;
}
16% {
opacity: 0;
}
33% {
opacity: 0;
}
49% {
opacity: 0;
}
66% {
opacity: 0;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#collections-section .her-container {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-start;
margin-left: 40px;
margin-bottom: 5%;
z-index: 2;
}
#collections-section .her-container .panel-container-allow-sliding {
left: 0;
}
#collections-section
.her-container
.panel-container-allow-sliding
.info-panel
p {
width: 320px;
}
#collections-section
.her-container
.panel-container-allow-sliding
.info-panel
.button-text {
margin-right: -17px;
}
#collections-section
.her-container
.panel-container-allow-sliding
.info-panel
.link-box-container {
right: 55px;
}
#collections-section
.her-container
.panel-container-allow-sliding
.info-panel
.link-box-container
.highlight-box {
left: 11px;
}
#collections-section
.her-container
.panel-container-allow-sliding
.info-panel
.her-stitches {
right: -20px;
top: -22px;
}
#collections-section .colour-song-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
margin-right: 40px;
}
#collections-section .colour-song-container .panel-container-allow-sliding {
right: 0;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
p {
width: 360px;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
.button-text {
margin-right: -17px;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
.colour-song-stitch {
left: -20px;
top: -20px;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
.link-box-container {
right: 60px;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
.link-box-container
.highlight-box {
right: -6.5px;
}
#collections-section
.colour-song-container
.panel-container-allow-sliding
.info-panel
.colour-song-stitches {
left: -20px;
top: -20px;
transform: rotate(90deg);
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id="collections-section">
<div class="section-header">
<div class="section-header-line">
</div>
<div class="section-header">Collections
</div>
</div>
<div class="collection-containers her-container">
<div class="panel-container-allow-sliding">
<div class="info-panel her-panel">
<div class="attention-line">
</div>
<h3>Her.</h3>
<p>Her feminine divinity draws me like a moth to the light, it has a
hold on my soul and I want to laugh and cry at the same time.</p>
<a class="link-box-container" href="https://www.reddit.com">
<div class="button-text">Explore More</div>
<div class="highlight-box"></div>
</a>
<div class="stitch-animation her-stitches">
<div class="her-stitch stitch-1"></div>
<div class="her-stitch stitch-2"></div>
<div class="her-stitch stitch-3"></div>
<div class="her-stitch stitch-4"></div>
<div class="her-stitch stitch-5"></div>
</div>
</div>
</div>
<div class="feature-photo-container">
<img src="images/collection-her-hero.jpg" alt="Grey Dress With Frills">
</div>
</div>
</div>
</div>