使用 javascript 而不是 ZD223E1439188E478349D52476506C2 在滚动时触发 CSS Animation

Question

How do I trigger the CSS animation for the svg paths using javascript? Tried a lot of ways. Here i have added a text which is basically a svg image. The animation works correctly and all i want is that the animation triggers only when scrolled.

 * { background-color: black; }.banner { color: white; font-size: 30px; width: 100%; height: 800px; } #logo { position: absolute; left: 50%; transform: translateX(-50%); } #logo path:nth-child(1) { stroke-dasharray: 545px; stroke-dashoffset: 545px; animation: line-anim 2s ease forwards; } #logo path:nth-child(2) { stroke-dasharray: 303px; stroke-dashoffset: 303px; animation: line-anim 2s ease forwards.3s; } #logo path:nth-child(3) { stroke-dasharray: 439px; stroke-dashoffset: 439px; animation: line-anim 2s ease forwards.6s; } #logo path:nth-child(4) { stroke-dasharray: 526px; stroke-dashoffset: 526px; animation: line-anim 2s ease forwards.9s; } #logo path:nth-child(5) { stroke-dasharray: 525px; stroke-dashoffset: 525px; animation: line-anim 2s ease forwards 1.2s; } @keyframes line-anim { to { stroke-dashoffset: 0; } }

Answer 1

Move all animation css to a separate class except the animation-delay. Add Scroll listener and add this class to the logo.

 document.addEventListener('scroll', function() { document.querySelector('.logo').classList.add('logo-animation') })

 .logo-animation { animation:line-anim 2s ease forwards } #logo:path { animation-delay: 2s; }