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;
}
}
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 trocandotranslate3d
portranslateY(30px) etc
já iqe vc só movimenta o elemento no eixo Y ele já é o suficiente-webkit-
paratransform
ouanimation
, 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