PhoneGap - CSS眨眼動畫不工作

我正在開發一個phonegap中的android應用程序（它已經作爲一個webapp工作），我有一個CSS眨眼動畫無法正常工作的問題。它在Android的Chrome中運行正常，但它不適用於應用程序。這裏的CSS代碼：PhoneGap - CSS眨眼動畫不工作

.blinkClass{ 
    animation-duration: 400ms; 
    animation-name: blink; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
    -webkit-animation:blink 400ms infinite; /* Safari and Chrome */ 
} 
@keyframes blink { 
    from { 
     background:#EEEEEE; 
     background: -webkit-radial-gradient(circle, rgba(200,200,200,1),rgba(200,200,200,0) 85%); 
     background: -o-radial-gradient(circle, rgba(200,200,200,1),rgba(200,200,200,0) 85%); 
     background: -moz-radial-gradient(circle, rgba(200,200,200,1),rgba(200,200,200,0) 85%); 
     background: radial-gradient(circle, rgba(200,200,200,1),rgba(200,200,200,0) 85%); 
    } 
    to { 
     background: yellow; 
     background: -webkit-radial-gradient(circle, rgba(255,255,0,1),rgba(255,255,0,0) 85%); 
     background: -o-radial-gradient(circle, rgba(255,255,0,1),rgba(255,255,0,0) 85%); 
     background: -moz-radial-gradient(circle, rgba(255,255,0,1),rgba(255,255,0,0) 85%); 
     background: radial-gradient(circle, rgba(255,255,0,1),rgba(255,255,0,0) 85%); 
    } 
} 
@-webkit-keyframes blink { 
    from { 
     background:#EEEEEE; 
     background: -webkit-radial-gradient(circle, rgba(200,200,200,1),rgba(200,200,200,0) 85%); 
     background: -o-radial-gradient(circle, rgba(200,200,200,1),rgba(200,200,200,0) 85%); 
     background: -moz-radial-gradient(circle, rgba(200,200,200,1),rgba(200,200,200,0) 85%); 
     background: radial-gradient(circle, rgba(200,200,200,1),rgba(200,200,200,0) 85%); 
    } 
    to { 
     background: yellow; 
     background: -webkit-radial-gradient(circle, rgba(255,255,0,1),rgba(255,255,0,0) 85%); 
     background: -o-radial-gradient(circle, rgba(255,255,0,1),rgba(255,255,0,0) 85%); 
     background: -moz-radial-gradient(circle, rgba(255,255,0,1),rgba(255,255,0,0) 85%); 
     background: radial-gradient(circle, rgba(255,255,0,1),rgba(255,255,0,0) 85%); 
    } 
}

任何想法可能是錯誤的？

編輯：

它不適用於Android的默認瀏覽器。

EDIT2：

我發現，Android的默認的瀏覽器不支持複雜的CSS動畫，只有簡單的。如果我這樣做：

@-webkit-keyframes blink2 { 
    from {opacity: 1.0;} 
    to {opacity: 0.0;} 
}

它工作正常。新問題是，我如何將radial-gradient分成幾部分？

來源

2017-03-09 Christian Rodriguez

它在設備的默認瀏覽器（它在出貨時提供的）中工作嗎？ –

@Likwid_T Emmm .....好點。剛剛檢查，它不工作。：S –

這就是瀏覽器cordova在爲您創建視圖時所使用的瀏覽器，請查看關於該瀏覽器的css解決方案。 –

我遇到過很多次使用CSS。它是極其重要的是在css組件上使用-webkit-標籤。

在css中使用-webkit-background以及標準背景變量。也會出現此錯誤的東西，如變換這應該是-webkit-變換：

玩弄它。 iOS很適合這樣的東西，不幸的是，android不是！

來源

2017-03-10 04:12:38

那麼，沒有動畫的情況下，背景就可以正常工作，但我肯定會試一試;）無論如何，這似乎只發生在舊設備上。 –

PhoneGap - CSS眨眼動畫不工作

回答

相關問題