过度 && 动画

CSS 过渡（Transitions）与动画（Animations）

CSS 过渡和动画是用于创建平滑视觉效果的强大工具。它们可以增强用户体验，使网页更加动态和有趣。下面将详细介绍 CSS 过渡和动画，并介绍几种常用的函数。

CSS 过渡（Transitions）

CSS 过渡用于在两个状态之间平滑地改变元素的样式属性。过渡通常用于响应用户的交互，如悬停、点击等。

基本语法

transition: property duration timing-function delay;

• property：指定要过渡的 CSS 属性，如 width, height, background-color 等。可以使用 all 表示所有属性。
• duration：过渡的持续时间，单位为秒（s）或毫秒（ms）。
• timing-function：过渡的速度曲线，控制过渡效果的速度变化。
• delay：过渡开始前的延迟时间，单位为秒（s）或毫秒（ms）。

示例

.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

在这个示例中，当鼠标悬停在按钮上时，背景颜色和文字颜色会平滑地过渡到新的值。

CSS 动画（Animations）

CSS 动画用于创建更复杂的动画效果。动画可以定义一组关键帧，并在这些关键帧之间平滑地过渡。

基本语法

1. 定义关键帧：

@keyframes animation-name {
    from {
        /* 初始状态 */
    }
    to {
        /* 结束状态 */
    }
}

或者使用百分比来定义多个关键帧：

@keyframes animation-name {
    0% {
        /* 初始状态 */
    }
    50% {
        /* 中间状态 */
    }
    100% {
        /* 结束状态 */
    }
}

2. 应用动画：

element {
    animation: animation-name duration timing-function delay iteration-count direction fill-mode;
}

• animation-name：指定要应用的关键帧动画的名称。
• duration：动画的持续时间，单位为秒（s）或毫秒（ms）。
• timing-function：动画的速度曲线，控制动画效果的速度变化。
• delay：动画开始前的延迟时间，单位为秒（s）或毫秒（ms）。
• iteration-count：动画的播放次数，可以是具体的数字或 infinite。
• direction：动画的播放方向，可以是 normal（正向）、reverse（反向）、alternate（正向反向交替）或 alternate-reverse（反向正向交替）。
• fill-mode：动画播放前后的样式，可以是 none、forwards、backwards、both。

示例

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.box {
    width: 100px;
    height: 100px;
    background-color: green;
    animation: slideIn 2s ease-in-out forwards;
}

在这个示例中，.box 元素会从屏幕左侧滑入，并在动画结束后保持在最终位置。

常用的函数

CSS 过渡和动画中常用的 timing-function 包括以下几种：

1. linear：

   • 匀速过渡或动画。
   • 示例：transition: all 2s linear;

2. ease：

   • 默认值，慢开始，中间快，慢结束。
   • 示例：transition: all 2s ease;

3. ease-in：

   • 慢开始，快结束。
   • 示例：transition: all 2s ease-in;

4. ease-out：

   • 快开始，慢结束。
   • 示例：transition: all 2s ease-out;

5. ease-in-out：

   • 慢开始，中间快，慢结束（与 ease 类似，但更平滑）。
   • 示例：transition: all 2s ease-in-out;

6. steps(n, start|end)：

   • 分步过渡或动画，n 是步骤数。
   • 示例：transition: all 2s steps(5, start);

7. cubic-bezier(x1, y1, x2, y2)：

   • 自定义贝塞尔曲线，用于更精细地控制过渡或动画的速度。
   • 示例：transition: all 2s cubic-bezier(0.42, 0, 1, 1);

示例：使用 cubic-bezier

.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    transition: background-color 0.3s cubic-bezier(0.42, 0, 1, 1);
}

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

在这个示例中，cubic-bezier(0.42, 0, 1, 1) 创建了一个快速加速的过渡效果。

总结

• 过渡（Transitions）：适用于简单的状态变化，如悬停效果。
• 动画（Animations）：适用于更复杂的动画效果，如滑动、旋转等。
• Timing Functions：控制过渡和动画的速度曲线，提供多种预设函数和自定义选项。

通过合理使用这些工具和函数，可以创建出丰富多样的视觉效果，提升用户体验。