CSS Transform Scale not working in Chrome, Safari - google-chrome

Question

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!

Answer 1

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-.