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，某些动画效果不会很好，因为它会要求您在移动元素时将鼠标放在元素上。

当在页面加载时激活或与其他元素交互时，可以更好地使用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快乐动画。

使用css3无法使用图像悬停对fadein效果起作用

1 个答案: