1

No safari Versão 12.1 (14607.1.40.1.4), ocorre um bug, o efeito acontece, porém dá um erro estranho, o elemento que sofreu o evento parece retroceder, a posição inicial do translate3d, diferente do chrome, que realmente mantém o elemento na nova posição da nova posição do translate3d.

 ul.tools.finish-animation {
        display: block;
        animation: downBumble 700ms;
        -moz-animation: downBumble 700ms; /* Firefox */
        -webkit-animation: downBumble 700ms; /* Safari and Chrome */
        -o-animation: downBumble 700ms; /* Opera */
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        will-change: transform;

      }


@keyframes downBumble {
  20%, 50%, 80%, 100% {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  0% {
    transform: translate3d(0px, -90px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  40% {
    transform: translate3d(0px, -30px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  60% {
    transform: translate3d(0px, -15px, 0px);
    -webkit-transform: translate3d(0px, -15px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }

}
@-moz-keyframes downBumble { /* Firefox */
  20%, 50%, 80%, 100% {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  0% {
    transform: translate3d(0px, -90px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  40% {
    transform: translate3d(0px, -30px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  60% {
    transform: translate3d(0px, -15px, 0px);
    -webkit-transform: translate3d(0px, -15px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }

}
@-webkit-keyframes downBumble { /* Safari and Chrome */
  20%, 50%, 80%, 100% {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  0% {
    transform: translate3d(0px, -90px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  40% {
    transform: translate3d(0px, -30px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  60% {
    transform: translate3d(0px, -15px, 0px);
    -webkit-transform: translate3d(0px, -15px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }


}
@-o-keyframes downBumble { /* Opera */
  20%, 50%, 80%, 100% {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  0% {
    transform: translate3d(0px, -90px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  40% {
    transform: translate3d(0px, -30px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  60% {
    transform: translate3d(0px, -15px, 0px);
    -webkit-transform: translate3d(0px, -15px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }

}

Fiddle de exemplo

8
  • Não sei se vai resolver, mas coloque um valor final na animação nos 100%, tipo 100% { -webkit-transform: translate3d(0px, 0px, 0px); } e se vc quer que a animação só se repita 1x coloque o -webkit-animation-fill-mode: forwards; pode ser que ajude tb. Testa ai e me fala, aqui não tenho um ambiente com Safari par poder testar ... Outra opção tb é testar trocando translate3d por translateY(30px) etc já iqe vc só movimenta o elemento no eixo Y ele já é o suficiente
    – hugocsl
    25/07/2019 às 15:02
  • Coloquei, mesmo assim, não rolou... :( 25/07/2019 às 15:11
  • Como não consigo debugar no safari, acho que nessa não consigo ajudar muito... mas vou "refazer" essa animação com um CSS mais limpo e te passo pra vc testar.
    – hugocsl
    25/07/2019 às 15:28
  • 1
    Ivan testa ai pra ver se o bug continua. Outra coisa, segundo o CanIUse vc nem precisa escrever o vendor prefix -webkit- para transform ou animation, então segue a versão simplificada. Eu dei uma boa limpada no CSS e a animação ficou muito similar codepen.io/hugocsl/pen/bXwbaJ
    – hugocsl
    25/07/2019 às 15:42
  • 1
    Resolveu aqui, valeu! 26/07/2019 às 17:28

1 Resposta 1

2

Conforme conversado nos comentários da pergunta segue a resposta.

O Safari 12, conforme pode ser consultado no Caniuse, não precisa mais dos prefixos -webkit- nas animações, keyframes ou transition. Outro ponte é que como a animação é apenas no eixo Y, não precisa usar o translate3d nem preserve-3d entre outras coisas que estavam no CSS e mais pesavam na animação do que ajudavam em alguma coisa.

Partindo dessas observações, dei essa "limpa" no CSS e ajustei os timings da da animação e parece funcionar no Safari sem problemas.

ul.tools li {
  float: left;
  padding: 6px;
  list-style:none;
  font-family: sans-serif;

  animation: anima 350ms linear forwards;
}

@keyframes anima {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-30px);
  }
  50%{
    transform: translateY(0px);
  }
  75% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}
<ul class="tools finish-animation">
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 2</a></li>
  <li><a href="#">link 2</a></li>         
</ul>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .