css如何实现元素过渡效果

css通过 transition 属性实现元素平滑过渡，需设置 Property、duration、timing-function 和 delay 四个参数，常用触发方式包括：hover、:focus 及javaScript 操作，仅数值和颜色类属性支持动画。

CSS 实现元素过渡效果主要依靠 transition 属性，它能让元素在状态变化时（比如鼠标悬停、获得焦点等）平滑地从一种样式过渡到另一种样式，而不是立即切换。

1. 使用 transition 属性

transition 是一个复合属性，可以控制过渡的多个方面：

• transition-property：指定要过渡的 CSS 属性，如 width、color、opacity 等。
• transition-duration：定义过渡持续时间，单位为秒（s）或毫秒（ms）。
• transition-timing-function：设置过渡的速度曲线，如 ease、linear、ease-in-out 等。
• transition-delay：设置过渡开始前的延迟时间。

示例：

.box {width: 100px;   height: 100px;   background-color: blue;   transition: width 0.5s ease, background-color 0.3s linear;}  .box:hover {width: 200px;   background-color: red; }

当鼠标悬停时，宽度在 0.5 秒内以缓动效果变化，背景色在 0.3 秒内线性变化。

立即学习 “ 前端免费学习笔记（深入）”；

2. 常用 timing-function 取值

• ease：默认值，慢速开始，然后变快，最后再慢下来。
• linear：匀速过渡。
• ease-in：慢速开始。
• ease-out：慢速结束。
• ease-in-out：慢速开始和结束。
• cubic-bezier(n,n,n,n)：可自定义贝塞尔曲线。

3. 简写 transition

可以直接使用简写形式：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

transition: property duration timing-function delay;

例如：

transition: all 0.4s ease-in-out 0.1s;

表示所有可动画属性在 0.4 秒内以 ease-in-out 效果过渡，延迟 0.1 秒开始。

4. 触发过渡的常见方式

• :hover：鼠标悬停。
• :focus：元素获得焦点（如输入框）。
• :checked：复选框或单选按钮被选中。
• javascript 动态添加类名（如 classlist.add）。

基本上就这些。只要设置好初始样式、目标样式和 transition 属性，浏览器 会自动处理中间的动画过程。注意，并非所有 CSS 属性都支持过渡，一般数值型或颜色类属性才可动画化。

以上就是