CSS transition（过度效果）详解
CSS transition 属性用于设置一个属性的过渡效果，当该属性的值发生变化时，可以在一定的时间内平滑地过渡到新的样式。
基本语法如下：
transition: property duration timing-function delay;property：定义过渡效果的 CSS 属性名。duration：定义过渡效果的持续时间。timing-function：定义过渡效果的时间曲线，默认为ease。delay：定义过渡效果何时开始，默认为 0，即立即开始。
示例代码：
div {
width: 100px;
height: 100px;
background-color: blue;
transition: width 1s ease-in-out; /* 当宽度变化时，持续1秒，使用缓进缓出的时间曲线 */
}
div:hover {
width: 200px; /* 鼠标悬停时宽度变为200像素 */
}在这个例子中，当鼠标悬停在 div 上时，它的宽度会在 1 秒内从 100 像素平滑过渡到 200 像素，时间曲线是 ease-in-out，即开始和结束时比较慢。
评论已关闭