Geek Answers Handbook

CSS transform: scale animation doesn't work in Safari and possibly in other browsers

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

It works with the latest version of Chrome (Mac OSX), but not with the latest version of Safari and an older version (I think) of Chrome. Is there anything I need to add?

+5
source share
3 answers

Add the code below and give it a 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); } }
+2
source

I noticed one more Safari problem when animating scale.

Safari doesn't seem to respect your scale if the element has display: inline (for example, it's a range). Make a block or an inline block.

It does not depend on the animation. This also applies to zooming without animation.

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

Chrome does not have this problem. He will happily scale the inline element.

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

+2
source

try zoom instead of scale , for web kit values ​​from 100% like scale 1, 1.5 = 150%, etc.

0
source

More articles:


All Articles