Problem Animation in Safari

Question

Problem Animation in Safari

Navigation

#1 by (1 votes)

0

Some time ago I noticed that in Safari the animations work in a different way.

For example, if we have a text inside a span and want to hover the letters of this text decrease 1px , we set letter-spacing: -1px; . Putting a transition: all 0.5 ease; on Chrome and Firefox will work smoothly.

But in Safari , this happens abruptly, ignoring the smoothness of the transition. Why?

Because I did not define in the normal element a letter-spacing: 0px; . That is, the property must have an initial value for the transition to take place. Only in Safari does this happen.

Now in the case below I can not get around the situation. When entering the site, two images perform an animation. But with% of% of these images, another effect happens.

Then when you take the mouse over the image, it returns to its initial properties and not to the properties that I set in hover of 100% of the animation.

In CSS I defined in the element that the image will begin with:

opacity: 0;
transform: scale(0);

And in KeyFrame I've set it to end with:

opacity: 1;
transform: scale(1);

Then in Safari the image returns with keyframes ...

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);
    }
}

css less css-animations

asked by anonymous 21.08.2015 / 15:58

1 answer

Java Lang Array Error Can union (mySQL) also be used in Updates?

score 1 · Answer 1

This can occur because the browser is not recognizing the css properties try as the example below, which is an example where it runs on all browsers.

// 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);