/* 基本语法 */
.element {
transition: property duration timing-function delay;
}
- property（属性）： 指定要过渡的CSS属性，例如opacity、width、transform等。
- duration（持续时间）： 过渡的持续时间，以秒（s）或毫秒（ms）为单位。
- timing-function（缓动函数）： 过渡的缓动函数，控制变化的速度。常见的有 ease、linear、ease-in、ease-out 等。
- delay（延迟）： 可选，指定过渡开始之前的延迟时间。
示例：
/* 过渡 opacity 属性，持续时间 0.5 秒，缓动函数为 ease */
.element {
transition: opacity 0.5s ease;
}
/* 过渡 width 和 height 属性，持续时间 1 秒，缓动函数为 ease-in-out，延迟 0.2 秒 */
.element {
transition: width 1s ease-in-out 0.2s, height 1s ease-in-out 0.2s;
}
/* 过渡所有属性，持续时间 0.3 秒，缓动函数为 linear */
.element {
transition: all 0.3s linear;
}
一旦元素的属性发生变化，过渡效果就会自动应用。你可以通过JavaScript、伪类（如 :hover）、或者其他事件触发状态变化，从而触发过渡效果。
/* 当鼠标悬停时，过渡改变背景颜色 */
.element {
background-color: #3498db;
transition: background-color 0.5s ease;
}
.element:hover {
background-color: #e74c3c;
}
这是一个简单的例子，鼠标悬停时元素的背景颜色会在0.5秒内平滑过渡到新的颜色。
转载请注明出处：http://www.zyzy.cn/article/detail/4064/CSS