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 秒内以缓动效果从蓝色变为红色。

硅基智能

基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播

62

查看详情

可过渡的属性

不是所有 CSS 属性都支持过渡。常见的可过渡属性包括：

• 颜色类：color、background-color、border-color
• 尺寸类：width、height、font-size
• 位置类：margin、padding、left、top（需配合定位使用）
• 透明度：opacity
• 变换类：transform（如 scale、rotate）

建议使用 transform 和 opacity 实现高性能动画，避免频繁重排。

注意事项

transition 不会主动触发动画，而是对“属性值改变”做出响应。常见触发方式包括：

• 伪类如 :hover、:focus、:checked
• javaScript 动态修改样式或 class
• 媒体查询（@media）导致样式变化

如果未设置 duration，过渡将不会生效，因为默认值是 0s。

基本上就这些，掌握 transition 能让你的网页更具交互感。

以上就是