用于WebKit的CSS诀窍[译]（3）

动画图片翻转

另一个前端工程师常见的现象是，当用户将鼠标放到图片上时，变换为另一张图片。在这个技巧中，让我们看看如何让图片从一个到另一个渐变交换，而不是简单的直接交换两张图片。实现这个效果的CSS和HTML如下：

 div.swapper img { -webkit-transition: opacity 1s ease-in-out; }
 img.img1, div.swapper:hover img.img2 { opacity: 1.0; }
 div.swapper:hover img.img1, img.img2 { opacity: 0; }

<div class="swapper">
 <img class="img1" style="position: absolute;" src="megan.jpg">
 <img class="img2" src="megan2.jpg">
</div>

在这里，”transition”属性使用简化符号来指定（图片）过渡的所有参说。第一个参数将属性指定为动画，第二个参数指定时间，第三个参数为简便指定时间功能。”ease-in-out”只是众多你可以只有支配的时间功能中的一个。你还可以指定一个线形变换、渐入、渐出或高级的立体贝塞尔曲线效果！

你可以自己亲身体验一下这个效果，你将会看到下图中的效果。

截图4. 一个CSS只能制定一个渐变效果

设想: 纯CSS的渐变效果！