CSS animation "transform: scale" not working in Safari and possibly other browsers

Question

@-webkit-keyframes scaleIn {
    from {-webkit-transform: scale(0);}
    to {-webkit-transform: scale(1);}
}

.animate-log-in {
  animation-name: scaleIn;
  animation-duration: 0.5s;
}

It's working on the latest version of Chrome (Mac OSX) but not in the latest version of Safari and an older version (I think) of Chrome. Is there anything I need to add?

Answer 1

Add the below code and try.

.animate-log-in {
    -webkit-animation: scaleIn;
    -webkit-animation-duration: 0.5s;
    animation: scaleIn;
    animation-duration: 0.5s;
}
@-webkit-keyframes scaleIn {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

Answer 2

instead of scale try zoom, for webkits values ranging from 100% as scale 1 , 1.5 = 150% and so on

Answer 3

I noticed another Safari issue when animating scale.

Seems Safari doesn't respects your scale if the element has display: inline (e.g. is a span). Make it block or inline-block.

This isn't animation-specific. It also goes for changing the scale with no animation.

This was with Safari 9. Also with the Mobile Safari of iOS 9.

Chrome does not have this issue. It will happily change the scale of an inline element.

JSFiddle to see it in action: https://jsfiddle.net/ca64gkma/5/