@-webkit-keyframes não funciona no Safari desktop e mobile

Boa tarde, tudo bem?

Tenho uma section na minha página inicial e o código é esse:

<section class="topo" id="bannerinicial" data-header="blue" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000" style="margin-top:50px;">
 <div class="container containerinicial">
 <div class="row">
 <div class="text-left col-sm-12 col-md-7 top text-white topoinicial">
 <h1 class="titulointroducaoazul display-4 text-white mb-3">SUA EMPRESA</h1>

 <p style="font-style: italic; font-weight:bold; color:white;" class="pintroducao text-white my-3">Teste</p>

 </div>
 </div>
 <div class="row">
 <div class="col-12 text-center marcacao">

 <div class="dica">
 <span></span>
 </div>

 </div>
 </div>
</div>
</section>

	Na parte do <div class="dica"> eu tenho um webkit keyframe no css:

.topo .dica{border:2px solid #fff;border-radius:15px;bottom:2rem;height:3rem;left:calc(50% - 0.875rem);position:absolute;width:1.75rem;z-index:2}
.topo .dica span{-webkit-animation:2s ease 0s normal forwards infinite running dica;animation:2s ease 0s normal forwards infinite running dica;background-color:#fff;border-radius:50%;display:inline-block;height:0.25rem;left:calc(50% - 0.125rem);position:absolute;top:0.5rem;width:0.25rem}
@-webkit-keyframes dica{30%,50%,70%{-webkit-transform:translateY(0rem);transform:translateY(0rem)}40%,60%{-webkit-transform:translateY(0.25rem);transform:translateY(0.25rem)}}@keyframes dica{30%,50%,70%{-webkit-transform:translateY(0rem);transform:translateY(0rem)}40%,60%{-webkit-transform:translateY(0.25rem);transform:translateY(0.25rem)}}@keyframes dica{30%,50%,70%{-webkit-transform:translateY(0rem);transform:translateY(0rem)}40%,60%{-webkit-transform:translateY(0.25rem);transform:translateY(0.25rem)}}

Esse css funciona no chorme, mas não funciona no Safari nem no desktop nem no mobile. Quando entro no site usando o Safari de 100 vezes que entro 1 vez funciona, o resto não funciona.

Alguem pode me ajudar como corrijo isso?