通过CSS3动画吐司通知

今天是我第一次访问css3动画，说实话，我不能让它在FF中工作。我有一个简单的通知系统，用于计算发送给用户的消息数量，并在闪烁的小红色圆圈中显示该值。通过CSS3动画吐司通知

我的问题是，它不闪烁，我也有使用半径填充，填充问题。

对此的任何帮助将是太棒了。

.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中测试。即使这不闪烁，我也非常喜欢在圆心的中心对齐的值。

问候，

特里

来源

2014-09-20 Tez Wingfield

你能创建一个[小提琴]（http://jsfiddle.net），我们可以看到这个问题？ – Banana 2014-09-20 16:32:21

@Banana小提琴按要求：http://jsfiddle.net/f3sh894w/ – 2014-09-20 17:03:52

这是因为火狐优先!important了关键帧，不像铬。

您已设置

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

防止关键帧动画从背景颜色。删除!important，它会工作。

Fixed Fiddle

来源

2014-09-20 17:20:09 Banana

梦幻般的工作！我一定会记得那一个。对于如何在现代浏览器中保持价值中心，你有什么建议吗？ – 2014-09-20 19:33:00

请您详细说明什么是价值，并且相对集中于哪个元素？ – Banana 2014-09-20 19:35:53

对不起，请忽略最后一个问题。我已经花了无数个小时一个相当复杂的项目，我开始有点困惑:) – 2014-09-20 19:49:34

通过CSS3动画吐司通知

回答

相关问题