ワードプレスでスクロールするときのSVGアニメーション

Question

私はワードプレスサイトでCSSでアニメーション化されたSVGをいくつか持っています。 可能ですか？

このページです：www.lauradepaolis.com/about/

は、これが最初のSVGのhtmlコードです：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 764 700"> 
    <defs> 
    <style> 
     .cls-1{fill:#e6e6e6;}.cls-2{fill:none;stroke:#e6e6e6;stroke-miterlimit:10;stroke-width:4px;} 
    </style> 
    </defs> 
    <title> 
    Senza titolo-1 
    </title> 
    <g id="Livello_1" data-name="Livello 1"> 
    <circle class="cls-1" cx="443" cy="404" r="55"/> 
    <circle class="cls-1" cx="142" cy="129" r="33"/> 
    <circle class="cls-1" cx="614" cy="675" r="25"/> 
    <circle class="cls-1" cx="672" cy="336" r="25"/> 
    <circle class="cls-1" cx="347" cy="168" r="25"/> 
    <circle class="cls-1" cx="25" cy="349" r="25"/> 
    <circle class="cls-1" cx="190" cy="628" r="25"/> 
    <circle class="cls-1" cx="746" cy="152" r="18"/> 
    <circle class="cls-1" cx="746" cy="530" r="18"/> 
    <circle class="cls-1" cx="413" cy="18" r="18"/> 
    <circle class="cls-1" cx="190" cy="469" r="18"/> 
    <circle class="cls-1" cx="538" cy="168" r="39"/> 
    <circle class="cls-1" cx="419" cy="603" r="39"/> 
    </g> 
    <g id="Livello_2" data-name="Livello 2"> 
    <line class="cls-2" x1="442.5" y1="403.5" x2="141.5" y2="128.5"/> 
    <line class="cls-2" x1="346.5" y1="167.5" x2="442.5" y2="403.5"/> 
    <line class="cls-2" x1="412.5" y1="17.5" x2="442.5" y2="403.5"/> 
    <line class="cls-2" x1="537.5" y1="167.5" x2="442.5" y2="403.5"/> 
    <line class="cls-2" x1="671.5" y1="335.5" x2="442.5" y2="403.5"/> 
    <line class="cls-2" x1="745.5" y1="529.5" x2="442.5" y2="403.5"/> 
    <line class="cls-2" x1="613.5" y1="674.5" x2="442.5" y2="403.5"/> 
    <line class="cls-2" x1="418.5" y1="602.5" x2="442.5" y2="403.5"/> 
    <line class="cls-2" x1="189.5" y1="627.5" x2="442.5" y2="403.5"/> 
    <line class="cls-2" x1="189.5" y1="468.5" x2="442.5" y2="403.5"/> 
    <line class="cls-2" x1="24.5" y1="348.5" x2="442.5" y2="403.5"/> 
    <line class="cls-2" x1="745.5" y1="151.5" x2="442.5" y2="403.5"/> 
    </g> 

、これが私のCSSコードです：

.cls-2 { 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    animation: dash 8s ease-in-out infinite; 
    direction: alternate; 
} 
@keyframes dash { 
    from { 
    stroke-dashoffset: 1000; 
    } 
    to { 
    stroke-dashoffset: 0; 
    } 
} 

Answer 1

jqueryが表示されているときにアニメーションのクラスを追加しました。
は 私はこれがあなたに

jQuery(document).ready(function($){ 
$(window).on('scroll', function(){ 
    if ($("#Livello_2").is(':visible')){ 
    $("#Livello_2").addClass("cls-2"); 
    } 
}); 
});