加载Android WebView(Ionic 2)时，CSS密钥帧动画不起作用

Question

我有一个离子2项目，需要向应用程序展示一些简单的动画。我正在使用CSS中的密钥帧进行动画，并且在iOS和浏览器中都可以正常工作，但是在Android中不在Android中，在某些较新的设备上它部分与Glitches一起工作，而在我的Nexus 5上，它根本不起作用。

我正在使用 -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和浏览器中正常工作。

我多年来一直是本地移动开发人员，这是我的第一个混合应用程序，因此，如果有人可以帮助我，当我退出解决方案时，它会很感激...

Answer 1

我想这将回答您所有问题/div>