opacity:0
}
.class:hover{
animation:ttt 3s 1 forwards /*这里的3s表示总动画长3秒，其它属性感兴趣自己去查，反正主要就是那个3s*/
}
@keyframes ttt {
0%{
opacity:0
}
66%{ /*这里表示3s的66%也就是大约2秒的时候*/
opacity:0
}
100%{
opacity:1
}
}
最终就会前2秒没变化，然后才开始执行了
一般来说只是替换图片的话用css完成就好，例子如下：
<!DOCTYPE html><html>
<head>
<style>
#hover {
position:relative
margin:0 auto
}
#hover img {
position:absolute
left:0
-webkit-transition: opacity 2s ease-in-out
-moz-transition: opacity 2s ease-in-out
-o-transition: opacity 2s ease-in-out
transition: opacity 2s ease-in-out
}
#hover img.top:hover {
opacity:0
}
</style>
</head>
<body>
<div id="hover">
<img class="bottom" src="Eiffel01.jpg">
<img class="top" src="Eiffel02.jpg">
</div>>
</body>
</html>
这个是延时2秒的淡入淡出图片替换，供参考。望采纳，谢谢
