在Android WebView中加载时CSS关键帧动画无法工作（IONIC 2）

我有一个Ionic 2项目，需要向应用程序提供一些简单的动画。我正在使用CSS中的关键帧进行动画制作，并且在iOS和浏览器中都可以正常工作，但在Android中，在部分较新的设备上部分工作有毛刺，而在Nexus 5上它根本不起作用。在Android WebView中加载时CSS关键帧动画无法工作（IONIC 2）

我使用这两种-webkit-和标准关键帧运行的动画，所以我有点失去了什么我做错了。

这里是我的代码：

.throw-object-plastic { 
    animation-name: plastic-bin-anim, top-scale; 
    animation-duration: 0.8s; 
    animation-fill-mode: forwards; 
    animation-timing-function: ease-in-out; 

    -webkit-animation-name: plastic-bin-anim, top-scale; 
    -webkit-animation-duration: 0.8s; 
    -webkit-animation-fill-mode: forwards; 
    -webkit-animation-timing-function: ease-in-out; 
} 


@-webkit-keyframes plastic-bin-anim { 
    from { 
     bottom: 0%; 
    } 
    to { 
     bottom: 80%; 
    } 
} 

@-webkit-keyframes top-scale { 
    0% { 
     -webkit-transform: scale(1.0); 
    } 
    10% { 
     -webkit-transform: scale(1.1); 
    } 
    30% { 
     -webkit-transform: scale(1.2); 
    } 
    50% { 
     -webkit-transform: scale(1.3); 
    } 
    70% { 
     -webkit-transform: scale(1.2); 
    } 
    80% { 
     -webkit-transform: scale(1.1); 
    } 
    90% { 
     -webkit-transform: scale(1.0); 
    } 
    95% { 
     -webkit-transform: scale(0.9); 
    } 
    100% { 
     -webkit-transform: scale(0.8); 
    } 
}

这是我改变屏幕上的物体的位置，并使用规模，使其做大，然后小，因此它看起来像扔的动画。基本上，我在同一时间使用2个动画。

正如我所说的，所有在iOS和浏览器中工作正常。

我多年的本地移动开发者，这是我的第一个混合的应用程序，所以希望如果有人能帮助我，我出来的解决方案......

来源

2017-04-26 Dejan Atanasov