CSS3動畫屬性無法在Chrome中工作，在Firefox/IE

我有以下CSS3屬性：CSS3動畫屬性無法在Chrome中工作，在Firefox/IE

@keyframes fadeSlideIn { from { bottom: -2em; opacity:0; } to { bottom: -.5em; opacity:1; } } 
@-webkit-keyframes fadeSlideIn { from { bottom: -2em; opacity:0; } to { bottom: -.5em; opacity:1; } } 


#dropdown-menu li a span.notify { 
    position:absolute; 
    bottom:-2em; 
    right: 0.5em; 

    width: 1.5em; 
    height: 1.5em; 

    line-height:1.5em; 
    text-align:center; 

    font-family:"Helvetica Neue"; 
    font-weight:bold; 
    color:#fff; 
    text-shadow:0px 1px 0px rgba(0,0,0,.15); 

    -webkit-box-shadow: 
     inset 0px 1px 0px rgba(255,255,255,35), 
     0px 1px 1px rgba(0,0,0,.2); 
    -moz-box-shadow: 
     inset 0px 1px 0px rgba(255,255,255,.35), 
     0px 1px 1px rgba(0,0,0,.2); 
    box-shadow: 
     inset 0px 1px 0px rgba(255,255,255,.35), 
     0px 1px 1px rgba(0,0,0,.2); 

    -webkit-border-radius:4em; 
    -moz-border-radius:4em; 
    border-radius:4em; 

    opacity:0; 
    filter: alpha(opacity=0); 

    animation: fadeSlideIn ease-in 1; 
    -webkit-animation: fadeSlideIn ease-in 1; 
    animation-fill-mode: forwards; 

    animation-duration: 1s; 
    animation-delay: 0.5s 

} 

#dropdown-menu li a span.notify.pink { 
    background-image: -webkit-linear-gradient(top, rgb(231, 56, 56), rgb(204, 24, 56)); 
    background-image: -moz-linear-gradient(top, rgb(231, 56, 56), rgb(204, 24, 56)); 
    background-image: -o-linear-gradient(top, rgb(231, 56, 56), rgb(204, 24, 56)); 
    background-image: -ms-linear-gradient(top, rgb(231, 56, 56), rgb(204, 24, 56)); 
    background-image: linear-gradient(top,  rgb(231, 56, 56), rgb(204, 24, 56)); 

    border:1px solid #a3112b; 
} 
#dropdown-menu li a span.yellow { 
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); 
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); 
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); 
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); 
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48'); 

    border:1px solid #dea94f; 
} 
#dropdown-menu li a span.blue { 
    background-image: -webkit-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); 
    background-image: -moz-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); 
    background-image: -o-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); 
    background-image: -ms-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); 
    background-image: linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ace4f8', EndColorStr='#6ccdf3'); 

    border:1px solid #79b5cb; 
}

這在IE/Firefox的罰款 - 但不是瀏覽器。我究竟做錯了什麼？

來源

2013-10-09 Barry Chapman

你有一些HTML代碼陪伴嗎？ –

什麼在Chrome中不起作用？我猜@Arty Gus的回答是正確的方向。 –

我想你錯過了基於WebKit的瀏覽器的animation-duration，animation-delay和animation-fill-mode性質定義：

#dropdown-menu li a span.notify { 
    ... 
    -webkit-animation-duration: 1s; 
    -webkit-animation-delay: 0.5s; 
    -webkit-animation-fill-mode: forwards; 
}

來源

2013-10-09 19:24:40 artygus

這會使其關閉，但動畫元素在動畫後立即消失。任何想法？ –

@BarryChapman我打錯填充模式，正確的是「轉發」（在答案中也改變了） – artygus

謝謝！我現在去:) –

從所有我們從OP迄今知道的信息，@Arty格斯正在朝着正確的指向方向。只是想補充一點，有一個爲所有動畫值的快捷方式：

animation: fadeSlideIn ease-in 1s .5s 1 forward; 
-webkit-animation: fadeSlideIn ease-in 1s .5s forward 1;

見例如克里斯Coyiers關鍵幀動畫的語法後：http://css-tricks.com/snippets/css/keyframe-animation-syntax/

編輯：填充的方式加入WebKit的動畫

來源

2013-10-09 20:17:39

是的，想要說明，但有點忙）順便說一句，你錯過了填充模式-webkit-animation – artygus

@ArtyGus Thx，已更新！ –

CSS3動畫屬性無法在Chrome中工作，在Firefox/IE

回答

相關問題