更新时间:2023-12-05 15:31:40
让我们使用伟大的mozilla文档来解释这一点:
Let's use the great mozilla documentation to explain this:
转换提供了一种方式来控制动画更改到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
希望它有帮助!