image scaling in android device

Question

im using css3 to scale an image when image is clicked by the user im assigning this css to an image it runs perfectly on browser but when i run it on the android it don't scale the image only translate method is working

.scaleImage{
-moz-animation-name: AN-ani-17;
-webkit-animation-name: AN-ani-17;
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes AN-ani-17 {
0% {
    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
   -webkit-animation-timing-function: ease;
}


50% {
    -webkit-transform: translate3d(0px, 380px, 0px) scale3d(1, 1.5, 1);
    -webkit-animation-timing-function: ease;
}

/*  75% {
    -webkit-transform: translate3d(0px, 270px, 0px) scale3d(1, 1.2, 1);
    -webkit-animation-timing-function: ease;
}*/

100% {
    -webkit-transform: translate3d(0px, 470px, 0px) scale3d(1, 1.6, 1);
    -webkit-animation-timing-function: ease;
}
}

@-moz-keyframes AN-ani-17 {
0% {
    -moz-transform: translate(0px, 0px) scale(1, 1);
    -moz-animation-timing-function: ease;
}


50% {
    -moz-transform:translate(0px, 380px, 0px) scale(1, 1.5, 1);
    -moz-animation-timing-function: ease;
}


100% {
    -moz-transform: translate(0px, 470px, 0px) scale(1, 1.6, 1);
    -moz-animation-timing-function: ease;
}

}

how to run it on android device

Answer 1

I assume you're using Android 2.2 or later? CSS3 scaling's not functioning on Android is a known bug . Star it if you'd like to see it fixed.

Related: CSS3 animation flicker on Android 2.2 (webkit-transform:translate(..) scale(..) at the same time)