Html 无法使用css3使图像悬停时的fadein效果生效

我有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>

---

但是，如果没有设置任何动画，请先看一下？

如果使用

：hover

，一些动画将无法正常工作，主要是因为在元素移动时需要将鼠标停留在元素上

在页面加载时激活或与其他元素交互时，更好地使用卷展栏和fadeInDown

使用

激活动画的第二步：悬停
如下设置：

.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
类设置为要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;
   }

这是快乐的动画
 它适合我（Chrome 26.0.1410.43 m）你到底想做什么？你只是想在悬停时激活动画吗？是的，我想在悬停时激活淡入淡出动画可能有问题，但我看不到淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出。。。其他2个效果显示良好。。。这可能是什么？即使我把鼠标放在它上面，我也没有注意到-webkit-也不见了，我想你把-ms-和-o-混在了其中一个上面。试试这个，我猜你已经看过Dan Eden的css动画库了，但是对于那些有类似问题的人来说，它可能会有所帮助——对于这种事情来说，它非常酷。