<style type="text/css">
@-webkit-keyframes gradients {
0% { opacity:1; }
100% { opacity:0; }
}
.gallery { position:relative; width:800px; height:250px; overflow:hidden; }
.gallery img { position:absolute; top:0; left:0; width:100%; height:100%; }
.gallery img { animation-name:gradients; animation-timing-function: ease-in-out; animation-iteration-count:infinite; animation-direction:alternate; }
.gallery img:nth-of-type(1) { animation-duration:2s; }
.gallery img:nth-of-type(2) { animation-duration:4s; opacity:0; }
</style>
<div class="gallery">
<img src="gallery/1.jpg">
<img src="gallery/2.jpg">
</div>渐隐渐显效果。但不能控制渐变切换后，停留的时间。
