我已经使用CSS关键帧，Waypoint和jQuery创建了徽标动画。
我有它-可以工作-但遇到了障碍，希望您能帮助我。
目标 向下滚动时，字母将旋入“ A”或辅助徽标。 向上滚动时，动画将反转并取消旋转回到正常状态。
当前状态 向下滚动时，动画将按预期运行。 向上滚动时，它会突然重新出现，这不是预期的动画。 向下滚动（再次）时，动画没有按预期运行，则突然出现（依此类推）。
问题 我如何才能获得漩涡和漩涡动画，以可靠地通过jQuery向下滚动和向上滚动？
预先感谢您的帮助！放心吧...我是一个CSS关键帧和jQuery noob xD
如果由于某些原因该片段没有足够的滚动空间，我的网站上也有一个演示：https://birdhousewebsites.com/stable-logo-test/
jQuery(document).ready(function($) {
// Spin OUT
$('#swirl-out').waypoint(function(direction) {
if (direction === 'down') {
// If Down Run Swirl In
$("#letter").each(function() {
// Find each letter and add the primary animation spinAll, then add the special transition-delay for each element
$('.item').addClass('spinAll');
// Remove the reverse class when going back up
$('.item').removeClass('spinAllReverse');
});
} else if (direction === 'up') {
// If Up Run Swirl Out
$("#letter").each(function() {
// Remove the spin all forward and add the same animations, but in reverse
$('.item').removeClass('spinAll');
$('.item').addClass('spinAllReverse');
});
}
}, { offset: '20%' });
});/* =============================================
STABLE SPIN OUT
============================================== */
/* Globals */
#swirl-out {
min-height: 1000px;
margin-top: 10%;
}
.spinAll {
animation-fill-mode: forwards;
transform-origin:center;
transition-timing-function: ease-out;
animation: swirlOut 0.6s ease-in both;
opacity: 1;
}
.spinAllReverse {
animation-fill-mode: forwards;
transform-origin:center;
transition-timing-function: ease-out;
animation: swirlOut 0.6s ease-in both;
opacity: 1;
animation-direction: reverse!important;
}
/* Delays */
.bigS {animation-delay: 0.1s!important;}
.bigS1 {animation-delay: 0.2s!important;}
.bigS4 {animation-delay: 0.3s!important;}
.bigS5 {animation-delay: 0.4s!important;}
.bigS6 {animation-delay: 0.5s!important;}
/* Secondary Logo */
.bigS2,
.bigS3 {
animation-fill-mode: forwards;
transform-origin:center;
transition-timing-function: ease-out;
animation: scaleDownSecondary 0.65s linear both;
animation-iteration-count: 1;
}
/* Animations */
@keyframes swirlOut {
0% {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
90% {
opacity: 0;
}
100% {
-webkit-transform: rotate(-540deg) scale(0);
transform: rotate(-540deg) scale(0);
opacity: 0;
}
}
@keyframes scaleDownSecondary {
0% {
-webkit-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
}
50% {
-webkit-transform: scale(0.5) rotateZ(180deg);
transform: scale(0.5) rotateZ(180deg);
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<link href="spin-out.css" rel="stylesheet" type="text/css">
<div id="swirl-out">
<svg data-name="big-s-out" xmlns="http://www.w3.org/2000/svg" width="6in" height="2in" viewBox="0 0 2036.7197 612">
<title>Stable Spinout</title>
<!-- small the -->
<polygon id="dropIn1" class="dropIn1 dropInAll" points="150.137 367.127 137.813 367.127 137.813 443.443 150.137 443.443 150.137 411.917 234.251 411.917 234.251 398.656 150.137 398.656 150.137 367.127"/>
<polygon id="dropIn2" class="dropIn2 dropInAll" points="137.813 282.344 179.534 282.344 179.534 334.01 137.813 334.01 137.813 347.139 234.251 347.139 234.251 334.01 191.992 334.01 191.992 282.344 234.251 282.344 234.251 269.212 137.813 269.212 137.813 282.344"/>
<polygon id="dropIn3" class="dropIn3 dropInAll" points="222.066 172.104 222.066 229.389 191.725 229.389 191.725 181.212 179.534 181.212 179.534 229.389 150.004 229.389 150.004 172.104 137.813 172.104 137.813 242.518 234.251 242.518 234.251 172.104 222.066 172.104"/>
<!-- BIG S -->
<path id="letter" class="item bigS" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z"/>
<!-- BIG T -->
<polygon id="letter" class="item bigS1" points="682.881 444.996 682.881 215.385 581.132 215.385 602.355 171.38 842.615 171.38 821.253 215.385 731.83 215.385 731.83 444.996 682.881 444.996"/>
<!-- ICON UPPER -->
<polygon id="" class="item bigS2" points="1022.924 362.747 964.44 234.65 909.723 362.747 859.133 362.747 940.211 171.373 989.104 171.373 1070.894 362.747 1022.924 362.747"/>
<!-- ICON LOWER -->
<polygon id="" class="item bigS3" points="819.226 444.996 839.223 403.871 1090.947 403.871 1110.751 444.996 819.226 444.996"/>
<!-- BIG B -->
<path id="letter" class="item bigS4" d="M1162.8,444.9959V171.38h126.5218c30.6233,0,54.9008,8.0925,70.2054,23.3971,11.8676,11.8747,17.6358,26.2214,17.6358,43.8714,0,52.9109-39.4831,64.1835-39.4831,64.1835s55.5343,7.9083,55.5343,69.55c0,63.2891-63.0285,72.6141-100.6033,72.6141Zm47.3013-41.1245h82.51c45.3081,0,52.07-24.1155,52.07-38.49,0-15.1989-7.029-39.3074-54.1261-39.3074h-80.453Zm0-117.0149h65.6415c46.0124,0,52.8864-23.6014,52.8864-37.6664,0-23.89-18.2345-36.686-48.7733-36.686h-69.7546Z"/>
<!-- BIG L -->
<polygon id="letter" class="item bigS5" points="1454.812 444.996 1454.812 171.38 1503.761 171.38 1503.761 401.808 1650.476 401.808 1629.693 444.996 1454.812 444.996"/>
<!-- BIG E -->
<polygon id="letter" class="item bigS6" points="1694.008 444.996 1694.008 171.38 1898.906 171.38 1878.604 213.328 1742.542 213.328 1742.542 281.122 1856.181 281.122 1835.818 323.07 1742.542 323.07 1742.542 403.04 1898.482 403.04 1878.199 444.996 1694.008 444.996"/>
</svg>
</div>