CSS動畫適用於Safari，但不適用於Firefox和Chrome

我正在使用animate.css來爲頁面中的某些元素設置動畫。有一個JQuery插件可以幫助您輕鬆使用它，animateCSS.js（來自GitHub）。在CSS動畫適用於Safari，但不適用於Firefox和Chrome

#top{ 
    visibility: hidden; 
}

這jQuery腳本褪色它：

$('#top').animateCSS('fadeInDown', 400);

之後的問題是，在動畫作品中的Safari瀏覽器，但不是在Firefox和Chrome，例如，我做了無形的選擇400ms它變得可見，但沒有動畫！

這是在網上http://ashraafi.com/index.html

來源

2012-11-22 Maysam

在Firebug中打開控制檯時出現：''NetworkError：404 Not Found - http://ashraafi.com/fonts/bbc-nassim-regular.woff「' –

但它存在那裏 – Maysam

很奇怪，它看起來像筆者留下了一部分在他的插件代碼中不應該存在 - 至少它沒有記錄在任何應該在那裏的地方。

刪除線pluign 63-67：

 if (!$("html").hasClass("csstransforms")) { 

      onEnd(); 

     }

這是造成動畫立即停止。爲什麼它在Safari中起作用我不知道。

來源

2012-11-22 20:02:40 Adam

謝謝你許多 – Maysam

我做樣本：http://jsfiddle.net/QkCq2/作品在Chrome HTML：

<div class="animated fadeInDown" style="background-color:green;"> 
<pre> 


</pre> 
</div>

CSS：

.animated { 
    -webkit-animation-duration: 2s; 
     -moz-animation-duration: 2s; 
     -ms-animation-duration: 2s; 
     -o-animation-duration: 2s; 
      animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
     -moz-animation-fill-mode: both; 
     -ms-animation-fill-mode: both; 
     -o-animation-fill-mode: both; 
      animation-fill-mode: both; 
} 


.fadeInDown{ 
    -webkit-animation-name: fadeInDown; 
    -moz-animation-name: fadeInDown; 
    -ms-animation-name: fadeInDown; 
    -o-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
}

來源

2012-11-22 19:36:03

CSS動畫適用於Safari，但不適用於Firefox和Chrome

回答

相關問題