通過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動畫吐司通知

回答

相關問題