CSS中动画和过渡的区别

在CSS中，动画（animation）和过渡（transition）是两种常用的操作，它们可以让网页中的元素动起来，增加交互性和视觉效果。但是它们有一些不同的特性和使用方式，下面我们来仔细了解一下。

动画

动画是指元素从一个状态逐渐变化到另一个状态的过程，可以设置多个关键帧（keyframes），来控制不同时间点的状态。动画通常需要定义一些关键字，包括动画名称、执行时间、触发方式等等。

语法

/* 定义动画 */
@keyframes 动画名称 {
    from {
        /* 初始状态 */
    }
    to {
        /* 结束状态 */
    }
}

/* 使用动画 */
元素选择器 {
    animation: 动画名称 动画时长 动画速度 动画延迟次数 动画方向 动画填充模式;
}

属性解释

• @keyframes: 定义一个动画，包括关键帧中的不同状态和对应的时间点。
• from: 定义动画开始的状态。
• to: 定义动画结束的状态。
• animation: 指定动画的名称、时长、速度、延迟、方向和填充模式等属性。

特点

1. 可以设置多个关键帧来控制不同时间点的状态。
2. 可以通过动画名称，方便地在多个元素之间共用同一个动画。
3. 可以设置动画的各种属性，控制播放方式、速度、方向等等。

示例

以下示例展示了一个通过动画实现的图标加载效果：

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-icon {
    animation: loading 1s infinite linear;
}

过渡

过渡指的是单个属性的变化，在元素发生变化时，平滑地从一个状态过渡到另一个状态。它可以控制元素的过渡时间、延迟和触发方式等属性。

语法

/* 定义过渡 */
元素选择器 {
    transition: 属性名 过渡时长 过渡速度 过渡延迟;
}

/* 触发过渡 */
元素选择器:hover {
    属性名: 属性值;
}

属性解释

• transition: 定义一个过渡，包括要过渡的属性、过渡时间、速度和延迟等属性。
• 属性名: 定义要过渡的属性。
• 属性值: 过渡后的属性值。

特点

1. 只能对单个属性进行过渡，不支持多个属性同时过渡。
2. 过渡只有两个状态，即开始状态和结束状态，无法控制中间状态。
3. 触发方式比较灵活，可以通过鼠标事件和JavaScript等方式来触发。

示例

以下示例展示了一个通过过渡实现的鼠标悬停效果：

button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0062cc;
}