CSS Transform Scale not working in Chrome, Safari

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