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眨眼动画不工作

回答

相关问题