CSSスタイルを適用する前にページ読み込み中にSVGファイルが点滅する

Question

私はページに下に移動するためにページジャンプを行うために使用されるページにsvgの矢印アイコンがあります。問題は、ページの読み込み時にsvgが画面全体で（フル高さと幅のように）すばやく点滅してから、適切なサイズと配置に移動することです。私は誰かがこれを削除するか、またはそれの顕著性を減らすために私を助けることができることを望んでいます。私は最初にdisplay：noneを入れようとしました。 JavaScriptを有効にして0.25秒後にそのクラスを削除しても問題は解決しませんでした。 Link to page here

HTML：

<div class="intro-foot"> 

        <a href="#section-services" class="smooth-scroll delay-load"> 
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.57 80" class="smooth-scroll-arrow"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Asset 6</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M28.28,4V66.34L6.83,44.89a4,4,0,1,0-5.66,5.66L29.46,78.83h0a4,4,0,0,0,.61.5c.1.07.21.11.31.17a3.86,3.86,0,0,0,.37.2,3.65,3.65,0,0,0,.41.13c.11,0,.22.08.33.1a4,4,0,0,0,.79.08h0a4,4,0,0,0,.77-.08c.12,0,.23-.07.35-.1a3.58,3.58,0,0,0,.4-.12,4,4,0,0,0,.4-.21c.1-.05.2-.1.29-.16a3.88,3.88,0,0,0,.61-.5L63.39,50.54a4,4,0,1,0-5.66-5.66L36.28,66.34V4a4,4,0,0,0-8,0Z"/></g></g></svg> 
        </a> 
</div> 

はCSS：

.delay-load {display: none !important;} 

.smooth-scroll-arrow { 
    margin-bottom: 70px; 
    height: 30px; 
    width: 30px; 
    padding: 0px; 
} 

.intro-foot { 
    -webkit-animation:bounce 2s infinite; 
} 

@-webkit-keyframes intro-foot { 
    0%  { bottom:5px; } 
    25%, 75% { bottom:15px; } 
    50%  { bottom:20px; } 
    100%  {bottom:0;} 
} 

のjQuery：

var $post = $(".smooth-scroll"); 
setTimeout(function(){ 
    $post.removeClass("delay-load"); 
}, 250); 

Answer 1

あり、ここでいくつかの問題であってもよいが、まずは最低ぶら下げ果物に対処しましょうことができます。 CarouFredselのコードを削除することはまず必要ではないようです（カルーセルの要素は1つだけです）。それは間違いなくレイアウトのサイジングを乱すかもしれません。あなたがそれをした後、もう一度テストし、それが修正されているかどうかを確認してください。