@-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?