CSS Transform Scale not working in Chrome, Safari
Your error is in this line :
-webkit-animation: changeSize 1s ease-out .5s 0 forwards;
There is an unnecessary 0
!
Lastly,
@-moz-keyframes changeSize /* Firefox */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
@-webkit-keyframes changeSize /* Safari and Chrome */{
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
@-o-keyframes changeSize /* Opera */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
Within these keyframes, you're missing something. None of the transform property have browser support prefixes. For example:
@-webkit-keyframes changeSize /* Safari and Chrome */{
0% {-webkit-transform:scale(0.6)}
100% {**-webkit-**transform:scale(1)}
}
I added -webkit- prefix to the transform property now it will display in Google Chrome and Safari.
Side note: you might have some unnecessary code blocks. -moz-,-ms-, and -o-.
user2163224
Updated on July 02, 2022Comments
-
user2163224 almost 2 years
I have looked at different answers posted on here but nothing has worked for me...
What: I have a div that is scaled down to 0.6 and when called should scale up to 1 (100%).
Problem: In Firefox #myDiv is scaling up as intended, but nothing happens in Chrome or Safari (on mac).
I have this DIV code:
#myDiv { -moz-animation: changeSize 1s ease-out .5s forwards; /* Fx 5+ */ -webkit-animation: changeSize 1s ease-out .5s 0 forwards; /* Safari 4+ */ -o-animation: changeSize 1s ease-out .5s forwards; /* Opera */ -webkit-transform: scale(0.6);/* Saf3.1+, Chrome */ -moz-transform: scale(0.6); /* FF3.5+ */ -ms-transform: scale(0.6); /* IE9 */ -o-transform: scale(0.6); /* Opera 10.5+ */ transform: scale(0.6); display: inline-block; opacity:100; background-image: url(img.png); width: 154px; height: 28px; position: absolute; left: 145px; top: 5px; }
And the keyframe animation for the scale up transition:
@keyframes changeSize { 0% {transform:scale(0.6)} 100% {transform: scale(1)} } @-moz-keyframes changeSize /* Firefox */ { 0% {transform:scale(0.6)} 100% {transform:scale(1)} } @-webkit-keyframes changeSize /* Safari and Chrome */{ 0% {transform:scale(0.6)} 100% {transform:scale(1)} } @-o-keyframes changeSize /* Opera */ { 0% {transform:scale(0.6)} 100% {transform:scale(1)} }
The HTML:
Please advise what I am missing here!
Thanks!