CSS 滑动效果在 Chrome 中不起作用？答案

【问题标题】：CSS sliding effect won't work in Chrome?CSS 滑动效果在 Chrome 中不起作用？
【发布时间】：2013-10-05 21:55:12
【问题描述】：

我的这段代码在 Firefox 和 IE 中运行良好，但在 Chrome 中却不行。它的作用是，当光标位于现有图像上时，它会在现有图像上启动幻灯片图像动画。是否有 Chrome 不支持的代码部分？

<td width="214">
    <div style="margin-left:19px; margin-top:-8px">
<div class="wrapper">
<img src="icon1.png">
<a href="http://www.somesite.com" target="_blank">
    <img id="slide" src="slide_img.png" />
    </a>
</div>  
</div>
</td>


.wrapper{
position: relative;
overflow: hidden;
width: 197px;
height: 162px;
} 

#slide{
position: absolute;
left: -197px;
width: 197px;
height: 162px;
background: transparent;
transition: 0.5s;
}

.wrapper:hover #slide {
transition: 0.3s;
left: 0;
}

【问题讨论】：

Alex，您可以接受答案或尝试清除您的疑虑（如果有）：）

标签： css animation slider

【解决方案1】：

问题出在包装器中的第一个图像中。尝试为 div 提供一个免费的环境，而不是使用 img 标签

Fiddle

修改后的html

<td width="214">
<div style="margin-left:19px; margin-top:-8px">
<div class="wrapper" >

<a href="http://www.biography.com/imported/images/Biography/Images/Profiles/K/Kaka-559558-1-402.jpg" target="_blank">
    <img id="slide" src="http://3.bp.blogspot.com/-9qLJXsHoVag/T_rA4WlE-PI/AAAAAAAAB0I/I4gHxidRYEY/s320/kaka.jpg" />
    </a>
</div>  
</div>
</td>

和css

.wrapper{
position: relative;
overflow: hidden;
width: 197px;
height: 162px;
    background:url('http://www.biography.com/imported/images/Biography/Images/Profiles/K/Kaka-559558-1-402.jpg')
}

【讨论】：

谢谢！但是有一个小问题。使用 CSS 中的背景，我必须为每个图标创建单独的类。我有很多。有没有办法用 HTML 代替它？
使用你想要或适合你的两个小提琴中的任何一个 :) 第二个不需要添加额外的类 :) 更改图像的显示

【解决方案2】：

您需要为此提供前缀

.cssname 
{
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}

【讨论】：