在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