CSS Rotation, Translate, Scale Animation Bug

user_1218605 0
Viewed 1437

I have created an animation for HTML/CSS3 using keyframes.

The animation is of an icon that is supposed to rotate and scale around its centre point.

The animation works in Chrome, but in Safari it doesn't properly translate until the end of the animation.

Here it is – snapping into position – in safari:

enter image description here

Here it is – smoothly animating into position – in chrome:

enter image description here

Here is the animation CSS:

@keyframes icon-animation {
    0% {
        left: 188.5px;
        top: 187.5px;
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: 50% 50%;
        width: 286.84px;
        height: 233.81px;
    }
    16.6667% {
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: 50% 50%;
    }
    50% {
        left: 188px;
        top: 188.5px;
    }
    66.6667% {
        transform: translate(-50%, -50%) rotate(0deg);
        transform-origin: 50% 50%;
        width: 200px;
        height: 163px;
    }
    100% {
        left: 188px;
        top: 188.5px;
        transform: translate(-50%, -50%) rotate(0deg);
        transform-origin: 50% 50%;
        width: 200px;
        height: 163px;
    }
}

The HTML and Default CSS are long-ish so I've created a codepen example, which can be found here:

https://codepen.io/traviskirton/pen/NLdKbb

css-animations safari
2 Answers

Despite being quite possibly a Safari specific bug, I wouldn't personally mess up too much with static pixels computation + top and left adjustment.

What you are basically doing there, is reducing the image size by 30%.

You can easily achieve the same via scale.

Following a simplified version of your animation that works as expected in Safari too.

@keyframes icon-animation {
    0% {
        transform-origin: 50% 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    100% {
      transform-origin: 50% 50%;
      transform: translate(-50%, -50%) rotate(0deg) scale(.70);
    }
}

If scale is not an option, you should try to play with margins but that might have undesired behavior in Chrome or Firefox.

user_28002180

Intro

I would actually simplify your code. I checked the compatibility table for transform-origin and it doesn't really match with safari. There is a question mark about transform-origin svg support and it also required a -webkit- vendor prefix that just makes things quite complicated for the simple effect you want.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin enter image description here

I was able to get the exact same effect, just by commenting various things ( and modifying the left/top values for some keyframes). And this works perfectly in both safari and chrome.

Example - Online

I tested both your example, and mine, on my mobile safari: https://codepen.io/menelaosbgr/pen/pOpXbB

Code:

@keyframes icon-animation {
    0% {
        left: 71px; 
         top: 90px;
        transform: rotate(-45deg);
/*         transform-origin: 50% 50%; */
        width: 286.84px;
        height: 233.81px;
    }
    16.6667% {
/*         left: 188px;
        top: 188.5px; */
        transform: rotate(-45deg);
/*         transform-origin: 50% 50%; */
    }
    50% {
/*         left: 188px;
        top: 188.5px; */
    }
    66.6667% {
/*         left: 188px;
        top: 188.5px; */
        transform:  rotate(0deg);
/*         transform-origin: 50% 50%; */
        width: 200px;
        height: 163px;
    }
    100% {
        left: 90px; 
         top: 90px;
        transform: rotate(0deg);
/*         transform-origin: 50% 50%; */
        width: 200px;
        height: 163px;
    }
}
user_16884410
Related