html - 无法使用 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>

但是没有动画任何东西，你能看看小提琴并帮我解决吗？

Answer 1

首先，如果主要使用某些动画效果不佳，:hover因为它需要您在元素移动时将鼠标保持在元素上。

rollOut 和 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 Happy 动画。