I'm struggling to understand why the animated arrow on my website refuses to go behind the other elements.
The animation code I've used for the arrow in CSS3 is as follows:
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-fill-mode:both;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
Even after scrolling down the page, the arrow remains visible, particularly in the Timeline and "Where do cats sleep" sections. I've attempted adjusting the z-index of various elements without success.
You can see the issue here
There may be a simple solution that I'm missing, any help would be appreciated. Thank you!