http://jsfiddle.net/L7XCD/1/

我们使用伟大的mozilla文档来解释这一点：

Let's use the great mozilla documentation to explain this:

Transition支持一种控制动画更改速度的方法到CSS属性。

Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

此外，我们还可以在特定时间段内转换属性更改，而不是立即生效。

Also we used the transition timing functions (ease, linear, easy-in, easy-out, easy-in-out)

定时功能（定时功能）使用转换定时功能（轻松，线性，简单易用，易于使用）确定如何计算转变的中间值。可以通过提供由定义立方贝塞尔的四个点定义的相应函数的图来指定定时函数

CCS 标记：

img {
    opacity: 0.6;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}​

因为他使用了transition-in-out，

Since he was using the transition ease-in-out, I thought it was better to use the same transition function.

有关详细信息，请查看此处的文档

For more information, check the documentation here

希望它有帮助！