Question

今天正式是我第一次访问css3动画，说实话，我无法让它在FF中工作。我有一个简单的通知系统，可以计算发送给用户的消息数量，并在一个闪烁的小红圈中显示该值。

我的问题是它没有闪烁，而且我正在使用半径进行大小调整，填充问题。

对此有任何帮助都很棒。

.alert-notification 
{
    border-radius: 50% !important;
    width: 21px !important;
    height: 21px !important; 
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-bottom: 1px !important;
    background-color:#f35958 !important;
    text-align:center !important;
    color: #fff !important;
    position:absolute;
    top:25px;
    left:-5px;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { /*opacity: 1.0;*/ background-color:#f35958;}
    50% { /*opacity: 0.0;*/ background-color:#CD0000;}
    100% { /*opacity: 0.7;*/ background-color:#8B0000; }
}

@-webkit-keyframes blinker {  
    0% { /*opacity: 1.0;*/ background-color:#f35958;}
    50% { /*opacity: 0.0;*/ background-color:#CD0000;}
    100% { /*opacity: 0.7;*/ background-color:#8B0000; }
}

@keyframes blinker {  
    0% { /*opacity: 1.0;*/ background-color:#f35958;}
    50% { /*opacity: 0.0;*/ background-color:#CD0000;}
    100% { /*opacity: 0.7;*/ background-color:#8B0000; }

}

这在Chrome中效果很好！未在IE中测试过。即使这不闪烁，我也非常希望在圆心中对齐值。

此致

特里

Answer 1

这是因为FireFox优先于关键帧!important，不像chrome。

你已经设定了

.alert-notification 
{
    background-color:#f35958 !important;
}

可防止关键帧为背景颜色设置动画。删除!important即可。

的 Fixed Fiddle

通过CSS3动画的吐司通知

1 个答案: