AndroidのWebView（IONIC 2）に読み込んだときにCSSキーフレームのアニメーションが動作しない

Question

私はIonic 2プロジェクトを持っており、簡単なアニメーションをアプリに提示する必要があります。私はCSSのキーフレームを使ってアニメーションを行っていましたが、IOSやブラウザではうまくいきましたが、一部の新しいデバイスでは部分的に動作していましたが、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

私は長年のためのネイティブモバイル開発者です、これは私の最初のハイブリッドアプリですので、私は、ソリューションの外だとして、誰かが私を助けることができるならば幸いですhttps://www.joshmorony.com/using-the-web-animations-api-in-ionic-2/