Há um tempo percebi que no Safari as animações funcionam de uma maneira diferente.
Por exemplo, se tivermos um texto dentro de um span
e queremos que ao hover
as letras desse texto diminuam 1px
, colocamos letter-spacing: -1px;
. Colocando um transition: all 0.5 ease;
, no Chrome e Firefox funcionam suavemente.
Mas no Safari, isso acontece abruptamente, ignorando a suavidade da transição. Por que ?
Porque eu não defini no elemento normal um letter-spacing: 0px;
. Ou seja, é preciso que a propriedade esteja com um valor inicial para acontecer a transição. Apenas no Safari acontece isso.
Agora no caso abaixo não consigo contornar a situação.
Ao entrar no site, duas imagens executam uma animação. Mas ao hover
dessas imagens, acontece outro efeito.
Daí quando tira o mouse de cima da imagem, ela volta nas suas propriedades iniciais e não para as propriedades que defini no 100%
do keyframes
da animação.
No CSS defini no elemento que a imagem vai começar com:
opacity: 0;
transform: scale(0);
E no KeyFrame defini que vai terminar com:
opacity: 1;
transform: scale(1);
Daí no Safari a imagem volta com opacity:0
...
CSS
.menu-language-full{
position: absolute;
right: 0;
width: 100px;
height: 50px;
display: block;
z-index: 1;
top: 15px;
img{
margin-left: 5px;
vertical-align: middle;
opacity: 0;
transform: scale(0);
animation-name: ShowImgIdioma;
animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
animation-fill-mode: forwards;
animation-duration: 0.5s;
transition: all 0.6s ease;
&.pt-br{
animation-delay: 2.2s;
}
&.en{
animation-delay: 2.4s;
}
&:hover{
transform: scale(1.1);
filter: blur(1px);
}
}
}
KeyFrames
@keyframes ShowImgIdioma{
100%{
opacity: 1;
transform: scale(1);
}
}
keyframe
? se não me engano, essa é uma exigência do safari