Androidでtransform:scaleが適用されない？

by FiNGAHOLiC

HTML

<button id="button">start animation</button>
<div id="dialog">
<div id="box"></div>
</div>

CSS

#dialog {
    width: 100%;
    height: 100%;
    background: red;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
#button {
    position: relative;
    z-index: 2;
}
#box {
    width: 20px;
    height: 20px;
    display: none;
    background: transparent url(http://placekitten.com/40/40);
    background-size: 20px 20px;
}

#box.animate {
    display: block;
    -webkit-animation: scaleanime 3s linear 1 normal;
    animation: scaleanime 3s linear 1 normal;
}

@-webkit-keyframes scaleanime {
    0%   {
        -webkit-transform: scale(2);
        transform: scale(2);
    }
    20%   {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    80%   {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scaleanime {
    0%   {
        -webkit-transform: scale(2);
        transform: scale(2);
    }
    20%   {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    80%   {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

JavaScript

var button = document.getElementById('button'),
    box = document.getElementById('box');
button.addEventListener('click', function(){
    box.setAttribute('class', 'animate');
}, false);
box.addEventListener('webkitAnimationEnd', function(){
    box.setAttribute('class', '');
}, false);
box.addEventListener('animationend', function(){
    box.setAttribute('class', '');
}, false);