CSS 过渡

CSS 过渡允许你在 CSS 属性值之间添加平滑的动画效果，而不是立即改变。当元素从一种状态变为另一种状态时，过渡效果会自动执行。

CSS 过渡是创建简单动画的首选方案，因为它性能好、实现简单。对于更复杂的动画序列，可以考虑使用 CSS 动画（@keyframes）。

常见效果：

• 悬停变色
• 放大 / 缩小
• 位移
• 透明度变化
• 阴影变化

过渡必须满足两个条件：

1. 属性发生变化（如 :hover、类名切换）
2. 该属性是 可过渡属性

基本语法

.element {
    /* 简写属性 */
    transition: property duration timing-function delay;

    /* 分开写法 */
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

过渡属性详解

1. transition-property

指定要应用过渡效果的 CSS 属性。

transition-property: all; /* 所有属性 */
transition-property: width, height; /* 指定多个属性 */
transition-property: opacity; /* 单个属性 */

2. transition-duration

定义过渡效果持续的时间。

transition-duration: 0.3s; /* 0.3秒 */
transition-duration: 500ms; /* 500毫秒 */
transition-duration: 2s; /* 2秒 */

3. transition-timing-function

定义过渡效果的速度曲线。

transition-timing-function: ease; /* 默认，慢-快-慢 */
transition-timing-function: linear; /* 匀速 */
transition-timing-function: ease-in; /* 慢开始 */
transition-timing-function: ease-out; /* 慢结束 */
transition-timing-function: ease-in-out; /* 慢开始和结束 */
transition-timing-function: cubic-bezier(x1, y1, x2, y2); /* 自定义贝塞尔曲线 */

4. transition-delay

定义过渡效果开始前的延迟时间。

transition-delay: 0s; /* 无延迟 */
transition-delay: 0.5s; /* 延迟0.5秒 */
transition-delay: 1s; /* 延迟1秒 */

可应用过渡的属性

大多数 CSS 属性都可以应用过渡效果，包括：

• 位置属性：top, left, right, bottom
• 尺寸属性：width, height, padding, margin
• 颜色属性：color, background-color, border-color
• 变换属性：transform（性能最佳）
• 透明度：opacity
• 字体属性：font-size, line-height

简单示例

基本示例

.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: red;
}

多个属性过渡