擬似要素をCSSアニメーションで動かそうとするとAndroidで動かない機種がでてくる

Android標準ブラウザで動かない場合があるようです。同じ機種でもChromeでは動きました。

DEMO

CSS

.box {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;
    width: 200px; height: 200px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .25) inset;    
}

.box:after {
    display: block;
    width: 0; height: 0;
    content: "";
    background: #3e3e3e;
    animation: anim 2.5s ease-in-out .5s forwards;
}

@keyframes anim {
    0% {
        width: 0; height: 0;
    }
    
    100% {
        width: 100%; height: 100%;
    }
}