CSS conversion scale does not work in Chrome, Safari

Question

I looked at the different answers posted here, but nothing worked for me ...

What: I have a div that is reduced to 0.6, and when the called should scale to 1 (100%).

Problem: In Firefox, #myDiv scales 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 keyframe animation to go up:

 @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)} } 

HTML:

Please let me know what I am missing here!

Thanks!

Answer 1

Your error on this line:

 -webkit-animation: changeSize 1s ease-out .5s 0 forwards; 

There is an unnecessary 0 !

Finally,

 @-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)} } 

You are missing something in these keyframes. None of the conversion properties has browser support prefixes. For instance:

 @-webkit-keyframes changeSize /* Safari and Chrome */{ 0% {-webkit-transform:scale(0.6)} 100% {**-webkit-**transform:scale(1)} } 

I added -webkit- the prefix to the transform property will now display in Google Chrome and Safari.

Side note: you may have unnecessary blocks of code. -moz -, - ms- and -o -.