Menu
@-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?
861
CSS animations do not work with all browsers. Therefore, when using a browser with CSS animation, you need to take note of the browser version and test to see whether the elements you are using are supported.
Safari supports two types of CSS animation: transition animations and keyframe animations.
Animation Duration Not Set By default, a CSS animation cycle is zero seconds long. To override this, add an animation-duration rule to your targeted element with a seconds value, in the same block as animation-name. Below, try removing the comments around animation-duration to fix the animation.
Browser Compatability This property is a proprietary extension that is only supported in Chrome and Safari browsers.
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/
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
