副队长CSS教程(37)–transition 过渡

1. 前言

需要注意的是，本章内容对CSS入门者来说，不是必须掌握的，了解即可。

transition 过渡可以让 CSS 属性变化产生平滑动画效果。默认情况下，样式修改是瞬间完成的，transition 可以在属性改变时，自动生成中间过渡帧，实现流畅的状态切换。过渡需要触发条件，不能自动运行，常配合 hover 使用。本篇讲解 transition 基础语法、参数，每个代码示例前介绍实现思路。

2. transition 基础用法

transition 可以简写，依次设置需要过渡的属性、过渡时长、缓动函数、延迟时间。最常用的写法是监听全部属性变化，或者单独指定某一个属性。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>transition基础示例</title>
    <style>
        .box {
            width: 120px;
            height: 120px;
            background-color: #409eff;
            border-radius: 8px;
            /* 简写：所有属性，过渡0.5秒 */
            transition: all 0.5s;
        }
        .box:hover {
            width: 180px;
            background-color: #67c23a;
        }
    </style>
</head>
<body>
    <div class="box">鼠标悬浮查看过渡效果</div>
</body>
</html>

鼠标悬浮前效果：

鼠标悬浮后效果：(注意有一个过渡的过程，不是一下子切换的)

使用要点：

transition 属性写在原始元素上，不要写在:hover 伪类中，否则鼠标移开时没有回退动画；
all 代表监听所有可动画属性，性能一般，项目中推荐明确写需要过渡的属性；
过渡时长单位 s 为秒，ms 为毫秒，时长不能省略。

3. transition 参数拆解

完整语法：transition: 属性时长缓动函数延迟;。缓动函数控制动画变化速度，延迟设置多久之后才开始执行过渡。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>transition多参数演示</title>
    <style>
        .box {
            width:120px;
            height:120px;
            background:#e6a23c;
            border-radius:8px;
            /* 仅过渡transform属性，0.4秒，先慢后快，延迟0.1s */
            transition: transform 0.4s ease-in 0.1s;
        }
        .box:hover {
            transform: scale(1.15) translate(10px, 0);
        }
    </style>
</head>
<body>
    <div class="box">带延迟和缓动的过渡</div>
</body>
</html>

效果自行运行代码即可，使用要点：

ease：默认，先快后慢；linear：匀速；ease-in：先慢后快；ease-out：先快后慢；ease-in-out：慢 - 快 - 慢；
延迟时间是触发后等待多久才开始动画；
多个属性分别过渡可以用逗号分隔。

4. 多属性分开过渡

多个 CSS 属性想要设置不同过渡时长，可以使用逗号分隔，分别定义每个属性的过渡规则。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多属性不同过渡时长</title>
    <style>
        .box {
            width:120px;
            height:120px;
            background:#f56c6c;
            border-radius:8px;
            /* 宽度0.3秒过渡，背景色0.8秒过渡 */
            transition: width 0.3s, background-color 0.8s;
        }
        .box:hover {
            width:200px;
            background:#722ed1;
        }
    </style>
</head>
<body>
    <div class="box">宽度和背景色过渡速度不一样</div>
</body>
</html>

效果自行运行代码即可，使用要点：

逗号分隔多组 transition 配置，顺序一一对应；
不是所有 CSS 属性都支持过渡，例如 display 不能做过渡。

5. 综合实战：悬浮卡片效果

网页中最常见的卡片悬浮放大、阴影加深效果，使用 transition 搭配 transform 和 box-shadow 实现。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>悬浮卡片实战</title>
    <style>
        .card {
            width:240px;
            padding:24px;
            background:#fff;
            border-radius:12px;
            box-shadow:0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-6px);
            box-shadow:0 8px 20px rgba(0,0,0,0.15);
        }
    </style>
</head>
<body>
    <div class="card">
        <h3>卡片标题</h3>
        <p>鼠标悬浮，卡片上浮，阴影变大</p>
    </div>
</body>
</html>

效果自行运行代码即可。

6. 总结

transition 过渡用于实现样式状态切换的平滑过程，必须触发（hover、JS 修改样式），不会自动播放；
推荐单独指定需要过渡的属性，少用 all，提升页面性能；
四个参数：过渡属性、时长、缓动函数、延迟；
无法对 display 属性做过渡，想要显隐过渡一般使用 opacity。