不能與CSS3

Question

工作圖像的懸停淡入效果我有CSS3這樣的：

.fadeInDown { 
    -webkit-animation-name: fadeInDown; 
    -moz-animation-name: fadeInDown; 
    -o-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
} 
img.fadeInDown:hover{ 
    -webkit-transform-origin: top center; 
    -moz-transform-origin: top center; 
    -o-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation: fadeInDown 1s ease-in-out; 
    -moz-animation: fadeInDown 2s ease-in-out; 
    -o-animation: fadeInDown 2s ease-in-out; 
    animation: fadeInDown 2s ease-in-out; 
} 

適用於

<a href="#" target="_blank" title="bing"> 
    <img class="fadeInDown" src="http://www.consortemarketing.com/wp-content/uploads/2011/10/bing-logo.png" /> 
</a> 

但是沒有動畫任何東西，請你看看該fiddle and help me solve it？

Answer 1

首先是一些動畫將無法正常工作，如果使用:hover主要是因爲它會要求你保持鼠標移動到元素，而它正在移動。在頁加載激活或當一些其他元件被交互時

部署和fadeInDown得到更好的利用。

其次，激活與:hover動畫設置它是這樣的：

.swing:hover{ 
    -webkit-transform-origin: top center; 
    -moz-transform-origin: top center; 
    -o-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation: swing 2s ease-in-out; 
    -moz-animation: swing 2s ease-in-out; 
    -o-animation: swing 2s ease-in-out; 
    animation: swing 2s ease-in-out; 
} 

則只需設置.swing類添加到您想要搖擺元素。

如果你想所有的圖像時，徘徊搖擺：

img:hover{ 
    -webkit-animation: swing 2s ease-in-out; 
    -moz-animation: swing 2s ease-in-out; 
    -o-animation: swing 2s ease-in-out; 
    animation: swing 2s ease-in-out; 
    } 

這裏的jsFiddle快樂動畫。