如何正確使用css動畫？

如何正確使用animation.css？我以這種方式使用它：。如何正確使用css動畫？

animated { 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 

-webkit-animation-duration:1.5s; 
-moz-animation-duration:1.5s; 
-ms-animation-duration:1.5s; 
-o-animation-duration:1.5s; 
animation-duration:1.5s; 
} 

.animated.hinge{ 
-webkit-animation-duration:1.5s; 
-moz-animation-duration:1.5s; 
-ms-animation-duration:1.5s; 
-o-animation-duration:1.5s; 
animation-duration:1.5s; 
} 


@-moz-keyframes fadeIn { 
    0% {opacity: 0;}  
    100% {opacity: 1;} 
} 

@-o-keyframes fadeIn { 
    0% {opacity: 0;}  
    100% {opacity: 1;} 
} 

@keyframes fadeIn { 
    0% {opacity: 0;}  
    100% {opacity: 1;} 
} 

.fadeIn { 
    -webkit-animation-name: fadeIn; 
    -moz-animation-name: fadeIn; 
    -o-animation-name: fadeIn; 
    animation-name: fadeIn;

我通過點擊鏈接將其稱爲動畫。所以，內容應該像我的網頁上的fadeIn一樣，以便用戶在看到內容之前有一些不錯的內容。我在onclick事件中通過jQuery函數將這個動畫類稱爲。這個功能看起來像這樣：

function getRightCol(){ 
       $('#right-col').addClass('fadeIn animated').removeClass('hidden'); 
         window.setTimeout(function(){ 
            $('#right-col').addClass('shown fadeIn');},1000); 
          window.setTimeout(function(){ 
       $('#right-col').removeClass('fadeIn fadeOut animated');},1000);       
    };

問題是，Firefox完美地完成了這個動畫。除了立即顯示內容之外，Chrome和Safari不會執行任何操作。此外，我的腳本在我的html頁面的底部。如果你想查看頁面，並看看這一刻檢查：wp.cloudstarter.de 那麼，爲什麼它不適用於Chrome？我的錯誤在哪裏？我也希望使用CSS動畫的一般技巧。

編輯：是的，我是一個新手。

來源

2013-10-25 Yannic Hansen

@ -webkit-關鍵幀？ – Sorprop

我從https://daneden.me/animate/ –

複製了css-classes，你可以隨時添加這個，它只有幾行;）它看起來像缺少-webkit，沒有更多。 – Sorprop

你需要把它添加到你的CSS：

@-webkit-keyframes fadeIn /* Safari and Chrome */ 
{ 
0% {opacity:0;} 
100% {opacity:1;} 
}

來源

2013-10-25 14:05:17 bitoffdev

@-webkit-keyframes fadeIn { 
    0% {opacity: 0;}  
    100% {opacity: 1;} 
}

來源

2013-10-25 13:37:33 Sorprop

如何正確使用css動畫？

回答

相關問題