我有一个svg箭头图标在一个页面上，是用来做一个页面跳转到更低的页面上。问题是，在页面加载时，SVG在整个屏幕上快速 Flink （如在全高和全宽中），然后转到正确的大小和位置。我希望有人能够帮助我删除这个或减少它的显着性。我尝试最初把显示：没有;在它上面，然后在0. 25秒后用JavaScript删除那个类，但它没有解决这个问题。
超文本标记语言：

<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></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);

型