css元素过渡transition属性基础
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：指定过渡开始前的延迟时间。
持续的时间（必填），单位为秒（s）或毫秒（ms）。简写语法格式：
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 不会主动触发动画，而是对“属性值改变”做出响应。常见触发方式包括：
- 伪类如 :hover、:focus、:checked
- JavaScript 动态修改样式或 class
- 媒体查询（@media）导致样式变化
如果未设置 duration，过渡将不会生效，因为默认值是 0s。
基本上就这些，掌握 transition 能让你的网页更具交互感。
