Question

我正在开发一个android应用程序在phonegap（已经作为webapp工作），我有一个CSS闪烁动画无法正常工作的问题。它在Android的Chrome中运行正常，但它不适用于应用程序。这是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分成几部分？

Answer 1

我使用CSS多次遇到过这种情况。在css组件上使用-webkit-标签非常重要非常重要。

在css中使用-webkit-background以及标准背景变量。转换之类的内容也会出现此错误， -webkit-transform：

玩弄它。对于像这样的东西，iOS非常好用，不幸的是android不是！

Ĵ

PhoneGap - CSS闪烁动画无法正常工作

1 个答案: