I'm experiencing an issue with an SVG arrow icon on my webpage that flashes quickly across the entire screen upon page load before settling into its proper size and placement. I've tried using CSS to initially hide the icon and then reveal it after a short delay using JavaScript, but this hasn't resolved the problem. Can anyone provide guidance on how to eliminate or reduce the visibility of this flashing effect?
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></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);