过渡

创建平滑的属性变化效果

全站首页 频道首页

什么是CSS过渡？

CSS过渡允许您在元素从一种样式变为另一种样式时添加平滑的动画效果。过渡通常与:hover、:active等伪类一起使用，或者通过JavaScript动态添加类来触发。

过渡 vs 动画：
  • 过渡：需要触发条件（如:hover），简单属性变化
  • 动画：不需要触发条件，可以定义复杂的关键帧序列
  • 过渡更适合简单的状态变化
  • 动画更适合复杂的连续动画

悬停查看过渡效果

过渡属性

CSS过渡涉及四个主要属性，可以单独设置或使用简写属性：

属性 描述 示例 默认值
transition-property 指定应用过渡的CSS属性 width, background-color, all all
transition-duration 指定过渡持续时间 0.3s, 1s, 500ms 0s
transition-timing-function 指定过渡的速度曲线 ease, linear, ease-in-out ease
transition-delay 指定过渡开始前的延迟时间 0s, 0.5s, 1s 0s

transition-property详解

可以指定单个属性、多个属性或所有属性：

CSS 
/* 单个属性 */
.element {
    transition-property: opacity;
}

/* 多个属性 */
.element {
    transition-property: opacity, transform;
}

/* 所有属性 */
.element {
    transition-property: all;
}

/* 排除某些属性 */
.element {
    transition-property: all;
    transition-property: not(transform); /* 实验性功能 */
}

过渡简写属性

可以使用transition简写属性同时设置所有过渡属性：

CSS 
.element {
    transition: property duration timing-function delay;
}

示例

CSS 
.box {
    transition: all 0.3s ease 0.1s;
}

/* 等同于： */
.box {
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0.1s;
}

多个过渡效果

可以为不同的属性设置不同的过渡效果：

CSS 
.element {
    transition: 
        opacity 0.3s ease,
        transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s;
}

可过渡的属性

并非所有CSS属性都可以应用过渡效果。一般来说，具有中间值的属性都可以过渡：

属性类型 示例 备注
尺寸属性 width, height, padding, margin 数值和百分比
颜色属性 color, background-color, border-color 所有颜色表示方法
位置属性 top, left, right, bottom 数值和百分比
变换属性 transform, opacity 性能优化首选
字体属性 font-size, line-height, letter-spacing 数值和长度单位
布局属性 flex-grow, flex-shrink, grid-template-columns Flexbox和Grid属性
滤镜属性 filter, backdrop-filter CSS滤镜效果
裁剪属性 clip-path, mask 形状和遮罩
注意： display属性不能应用过渡效果。如果需要淡入淡出效果，请使用opacity和visibility属性配合过渡。

display属性的替代方案

CSS 
.element {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.element.show {
    opacity: 1;
    visibility: visible;
}

缓动函数

缓动函数定义了过渡过程中数值变化的速度曲线，对动画的自然感至关重要。

函数 描述 效果 适用场景
ease 默认值，慢速开始，然后变快，然后慢速结束 ↗ ↘ 通用场景
linear 匀速运动 → → 机械运动、颜色变化
ease-in 慢速开始 ↗ → 进入视图、淡入
ease-out 慢速结束 → ↘ 离开视图、淡出
ease-in-out 慢速开始和结束 ↗ ↘ 状态切换
cubic-bezier(n,n,n,n) 自定义三次贝塞尔曲线 自定义 特殊效果
steps(n, start/end) 步进函数 分段 逐帧动画

贝塞尔曲线

使用cubic-bezier()函数可以创建自定义的缓动效果：

CSS 
.element {
    /* 弹跳效果 */
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* 快速进入，慢速结束 */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* 慢速进入，快速结束 */
    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

步进函数

steps()函数创建离散的过渡效果：

CSS 
.element {
    /* 4步过渡，每一步结束时变化 */
    transition: all 1s steps(4, end);
    
    /* 4步过渡，每一步开始时变化 */
    transition: all 1s steps(4, start);
}

过渡事件

JavaScript可以监听过渡的开始、结束和取消事件：

JavaScript 
const element = document.querySelector('.transition-element');

// 过渡开始
element.addEventListener('transitionstart', function(event) {
    console.log('过渡开始', event.propertyName);
});

// 过渡结束
element.addEventListener('transitionend', function(event) {
    console.log('过渡结束', event.propertyName);
});

// 过渡取消
element.addEventListener('transitioncancel', function(event) {
    console.log('过渡取消', event.propertyName);
});

// 过渡运行中
element.addEventListener('transitionrun', function(event) {
    console.log('过渡运行中', event.propertyName);
});

过渡效果演示

过渡属性

选择要应用过渡效果的CSS属性

持续时间

控制过渡动画的持续时间

缓动函数

定义过渡动画的速度曲线

延迟时间

过渡开始前的延迟时间
当前设置: width 300ms ease
状态: 就绪
过渡演示
悬停或点击触发过渡

当前CSS代码

CSS 
transition: width 300ms ease 0ms;

过渡事件日志

过渡事件将显示在这里...

实际应用示例

按钮悬停效果

CSS 
.button {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.button:active {
    transform: translateY(0);
}

淡入淡出效果

CSS 
.fade-element {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.fade-element.show {
    opacity: 1;
    visibility: visible;
}

手风琴效果

CSS 
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-content.open {
    max-height: 500px;
}

卡片悬停效果

CSS 
.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

过渡性能优化

使用transform和opacity： 这些属性可以由GPU加速，性能更好。
避免布局抖动： 避免在过渡中修改会影响布局的属性，如width、height、margin等。
使用will-change： 提前告知浏览器元素将要发生的变化，以便优化。
减少复合操作： 避免同时过渡多个复杂属性。
CSS 
/* 性能优化示例 */
.optimized-element {
    will-change: transform, opacity;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 避免这样做 */
.unoptimized-element {
    transition: all 0.3s ease; /* 可能触发布局重排 */
}

过渡与可访问性

减少动画偏好： 尊重用户的系统偏好设置，为偏好减少动画的用户提供替代方案。
CSS 
/* 基础过渡效果 */
.element {
    transition: transform 0.3s ease;
}

/* 为偏好减少动画的用户移除过渡 */
@media (prefers-reduced-motion: reduce) {
    .element {
        transition: none;
    }
}
上一课：响应式设计 下一课：动画