动画 CSS3 不适用于此悬停图像

【问题标题】：Animation CSS3 does not work on this hover image动画 CSS3 不适用于此悬停图像
【发布时间】：2013-06-23 16:47:27
【问题描述】：

我有一张图片，它的背景在悬停时会发生变化，我想给它添加悬停。

这是我要补充的：

  -webkit-transition: all 1s ease-in-out;

它是在线版本： http://jsfiddle.net/jmXdh/2/

【问题讨论】：

标签： css animation background css-transitions css-animations

【解决方案1】：

DEMO

这就是您正在寻找的解决方案！

HTML CHANGES
<a href="/">
<img class="imghover" src="http://i42.tinypic.com/2v9zuc1.jpg"/>
<img class="img" src="http://i40.tinypic.com/i3s4dc.png"/>
</a>

CSS IMPROVEMENTS
.img{
    z-index:1;
    margin-left: -190px;
    margin-bottom:5px;
    opacity:0;
    -webkit-transition:opacity 0.5s;
}
.img:hover{
    opacity:1;
}
.imghover{
    z-index:-100;
}

【讨论】：

哇太棒了。非常感谢。

【解决方案2】：

某些 CSS 属性无法设置动画，包括 background-image。见https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

【讨论】：

嗯，我想过，但我的代码中有一个图像标签，我不能为它制作动画吗？
@AlexJj 不怕，一般情况下，您可以制作动画的只有数值或颜色。