0

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);
    }
}
2
  • 1
    voce prefixou o keyframe ? se não me engano, essa é uma exigência do safari Commented 21/08/2015 às 17:22
  • 1
    Sim, prefiquissei. Commented 21/08/2015 às 17:23

1 Resposta 1

1

Isso pode ocorrer pelo browser não estar reconhecendo as propriedades css tente como o exemplo abaixo, que é um exemplo onde o mesmo é executado em todos navegadores.

//OPACITY

-moz-opacity: 0.28;
-khtml-opacity: 0.28;
opacity: 0.28;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=28);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=28);
filter:alpha(opacity=28);

//TRANSITION

-webkit-transition: all 01s ease;
-moz-transition: all 01s ease;
-ms-transition: all 01s ease;
-o-transition: all 01s ease;
transition: all 01s ease;

//TRANSFORM

-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
1
  • O meu está assim Rodrigo. É que eu programo em LESS e depois compilo em CSS com o Gulp.Js. E ele faz esses prefixes automaticamente. Commented 25/08/2015 às 11:21

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 .