css的transition属性用于实现元素样式的平滑过渡,通过设置Property、duration、timing-function和delay控制动画效果,常用于:hover等状态变化,提升交互体验。
CSS 的 transition 属性用于控制元素从一种样式平滑过渡到另一种样式的效果,常用于鼠标悬停、状态切换等交互场景。它让页面动效更自然,提升用户体验。
transition 基本语法
transition 是一个复合属性,可以同时设置以下子属性:
- transition-property:指定要过渡的 CSS 属性,比如 width、color、opacity 等。
- transition-duration:定义过渡动画持续的时间(必填),单位为秒(s)或毫秒(ms)。
- transition-timing-function:设置过渡的速度曲线,如 ease、linear、ease-in-out 等。
- transition-delay:指定过渡开始前的延迟时间。
简写语法格式:
transition: property duration timing-function delay;
常见用法示例
例如,实现一个按钮颜色缓慢变化的效果:
立即学习“前端免费学习笔记(深入)”;
.box {
background-color: blue;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: red;
}
当鼠标悬停时,背景色会在 0.5 秒内以缓动效果从蓝色变为红色。
可过渡的属性
不是所有 CSS 属性都支持过渡。常见的可过渡属性包括:
- 颜色类:color、background-color、border-color
- 尺寸类:width、height、font-size
- 位置类:margin、padding、left、top(需配合定位使用)
- 透明度:opacity
- 变换类:transform(如 scale、rotate)
建议使用 transform 和 opacity 实现高性能动画,避免频繁重排。
注意事项
transition 不会主动触发动画,而是对“属性值改变”做出响应。常见触发方式包括:
如果未设置 duration,过渡将不会生效,因为默认值是 0s。
基本上就这些,掌握 transition 能让你的网页更具交互感。