CSS Rotation, Translate, Scale Animation Bug

Question

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:

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

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

Answer 1

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.

Answer 2

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

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