CSS基础教程-动画

CSS基础教程-动画# CSS基础教程-动画

一、过渡（Transition）

实现属性变化的平滑过渡效果 transition属性用于设置元素从一种样式过渡到另一种样式时的过渡效果。

基本语法

transition: <property> <duration> <timing-function> <delay>;

• transition属性的完整语法

• property: 指定要过渡的CSS属性名称，如width、color等。可以是具体属性也可以是all

• duration: 过渡效果持续的时间，单位可以是s（秒）或ms（毫秒）

• timing-function: 定义过渡效果的速度曲线，常用值包括:

  • ease: 缓慢开始，然后加速，最后减速结束（默认值）
  • linear: 匀速运动
  • ease-in: 缓慢开始，然后加速
  • ease-out: 快速开始，然后减速
  • ease-in-out: 缓慢开始和结束，中间加速

• delay: 延迟开始过渡效果的时间，单位可以是s或ms

示例

.box {
    width: 100px;
    transition: width 0.3s ease-in-out;
}
.box:hover {
    width: 200px;
}

transition是属性简写，也可以单独使用以下属性来定义:

• transition-property: 指定过渡属性（all表示所有属性）
• transition-duration: 过渡持续时间（必需）
• transition-timing-function: 过渡速度曲线（可选）
• transition-delay: 延迟开始时间（可选）

二、关键帧动画（Animation）

CSS 动画通过 @keyframes 规则定义，允许创建从一个样式到另一个样式的平滑过渡效果。与 transition 不同，animation 可以实现更复杂的动画效果。

---

1. @keyframes 的用法

@keyframes 是定义动画的关键部分，它描述了动画在不同时间点的状态变化。

基本语法：

@keyframes animation-name {
    from { /* 动画开始时的样式 */ }
    to { /* 动画结束时的样式 */ }
}

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

@keyframes animation-name {
    0% { /* 动画开始时的样式 */ }
    50% { /* 动画中间状态的样式 */ }
    100% { /* 动画结束时的样式 */ }
}

• from 等价于 0%，表示动画的起点。
• to 等价于 100%，表示动画的终点。
• 百分比可以自由设置，用于定义动画过程中任意时间点的状态。

---

2. 应用动画

通过 animation 属性将定义好的动画应用到元素上。

基本语法：

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode>;

• name : 动画名称，对应 @keyframes 中定义的名字。
• duration: 动画持续时间，单位为秒（s）或毫秒（ms），必须指定。
• timing-function : 定义动画的速度曲线，默认值为 ease。
• delay : 动画延迟开始的时间，默认值为 0s。
• iteration-count : 动画播放次数，可以是具体数字或 infinite（无限循环）。
• direction : 动画播放方向，可选值包括：
  • normal: 正常播放（默认值）。
  • reverse: 反向播放。
  • alternate: 往返交替播放。
  • alternate-reverse: 反向往返交替播放。
• fill-mode : 定义动画在执行前后如何应用样式，可选值包括：
  • none: 默认值，不保留动画效果。
  • forwards: 动画结束后保持最后一帧的状态。
  • backwards: 动画开始前显示第一帧的状态。
  • both: 同时应用 forwards 和 backwards。

---

3. 示例

示例 1：简单的上下弹跳动画

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.element {
    animation: bounce 1s infinite;
}

• 动画名称：bounce
• 持续时间：1s
• 循环次数：infinite（无限循环）

示例 2：颜色渐变动画

@keyframes colorChange {
    0% { background-color: red; }
    50% { background-color: green; }
    100% { background-color: blue; }
}

.box {
    width: 100px;
    height: 100px;
    animation: colorChange 2s ease-in-out infinite alternate;
}

• 动画名称：colorChange
• 持续时间：2s
• 速度曲线：ease-in-out
• 循环次数：infinite
• 播放方向：alternate（往返交替）

示例 3：带有延迟和填充模式的动画

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.text {
    animation: fadeIn 2s ease-in 1s forwards;
}

• 动画名称：fadeIn
• 持续时间：2s
• 延迟时间：1s
• 填充模式：forwards（动画结束后保持最后一帧的状态）

---

4. 注意事项

1. 浏览器兼容性

   在某些旧版本浏览器中可能需要添加前缀（如 -webkit-）。例如：

   @-webkit-keyframes example {
       from { opacity: 0; }
       to { opacity: 1; }
   }

2. 性能优化

   • 使用 transform 和 opacity 属性进行动画，这些属性通常会触发 GPU 加速。
   • 避免对大量元素同时应用复杂动画，可能导致性能问题。

3. 调试动画

   使用浏览器开发者工具中的"动画"面板可以查看和调试 CSS 动画。

三、3D变换

1. 基本3D变换

CSS 3D变换允许元素在三维空间中进行旋转、平移和缩放。以下是一些常用的3D变换函数：

• rotateX(angle): 绕X轴旋转元素。
• rotateY(angle): 绕Y轴旋转元素。
• rotateZ(angle): 绕Z轴旋转元素。
• translateZ(length): 沿Z轴平移元素。
• scale3d(sx, sy, sz): 按照指定的倍数缩放元素。

示例

.cube {
    transform: 
        rotateX(45deg) 
        rotateY(45deg) 
        translateZ(50px);
}

2. 透视与3D空间

为了更好地展示3D效果，可以使用perspective属性来设置观察者距离3D场景的距离，并使用transform-style: preserve-3d来保持3D空间。

• perspective(length): 设置观察者距离3D场景的距离。
• transform-style: preserve-3d: 保持子元素的3D变换效果。

示例

.container {
    perspective: 800px; /* 观察者视角距离 */
    transform-style: preserve-3d; /* 保持3D空间 */
}

.card {
    transition: transform 1s;
    transform: rotateY(180deg);
}

3. 隐藏背面

在3D变换中，有时需要隐藏元素的背面，可以使用backface-visibility属性。

• backface-visibility: hidden: 隐藏元素的背面。

示例

.face {
    position: absolute;
    backface-visibility: hidden;
}

.back {
    transform: rotateY(180deg);
}

4. 性能优化

为了提高3D变换的性能，可以采取以下优化措施：

• 优先使用transform和opacity属性：这些属性通常会触发GPU加速。
• 避免在scroll或resize事件中触发动画：这些事件频繁触发，可能导致性能问题。
• 使用will-change属性预声明变化：提前通知浏览器哪些属性会发生变化，以便进行优化。
• 复杂动画考虑使用Web Animations API：对于复杂的动画效果，Web Animations API提供了更强大的控制能力。

示例

.element {
    will-change: transform;
    transition: transform 0.3s ease-in-out;
}

四、性能优化技巧

为了确保CSS动画和3D变换的流畅性和性能，可以采取以下优化措施：

1. 优先使用transform和opacity属性

transform和opacity属性通常会触发GPU加速，从而提高动画性能。其他属性（如left、top、width、height等）可能会导致重绘或重排，影响性能。

示例

.element {
    transform: translateX(100px); /* 使用transform */
    opacity: 0.5; /* 使用opacity */
}

2. 避免在scroll或resize事件中触发动画

scroll和resize事件频繁触发，如果在这些事件中进行复杂的动画操作，可能会导致性能问题。尽量避免在这些事件中触发动画，或者使用requestAnimationFrame来优化。

示例

window.addEventListener('scroll', () => {
    requestAnimationFrame(() => {
        // 动画逻辑
    });
});

3. 使用will-change属性预声明变化

will-change属性可以提前通知浏览器哪些属性会发生变化，以便进行优化。不过，使用时要谨慎，因为过度使用可能会导致不必要的性能开销。

示例

.element {
    will-change: transform, opacity;
}

4. 复杂动画考虑使用Web Animations API

对于复杂的动画效果，CSS动画和过渡可能不够灵活。Web Animations API提供了更强大的控制能力，可以更精细地控制动画的播放和暂停。

示例

const element = document.querySelector('.element');
const animation = element.animate([
    { transform: 'translateX(0)' },
    { transform: 'translateX(100px)' }
], {
    duration: 1000,
    iterations: Infinity
});

5. 减少重绘和重排

重绘和重排是影响性能的关键因素。尽量减少对布局有影响的属性变化，例如width、height、margin、padding等。

示例

.element {
    /* 使用transform而不是left */
    transform: translateX(100px); 
}

6. 使用硬件加速

通过使用transform和opacity属性，可以利用硬件加速，减少CPU的负担。确保这些属性的值是可硬件加速的。

示例

.element {
    transform: translate3d(0, 0, 0); /* 使用translate3d */
    opacity: 0.5; /* 使用opacity */
}

7. 优化关键帧动画

• 减少关键帧数量：过多的关键帧会导致性能下降，尽量减少不必要的关键帧。
• 使用百分比定义关键帧：使用百分比定义关键帧可以更精确地控制动画过程。

示例

@keyframes example {
    0% { transform: translateX(0); }
    50% { transform: translateX(50px); }
    100% { transform: translateX(100px); }
}

五、综合案例：3D卡片翻转

为了展示一个完整的3D卡片翻转效果，我们可以创建一个简单的HTML结构，并使用CSS来实现翻转动画。以下是一个详细的示例，包括HTML和CSS代码。

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 卡片翻转</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scene">
        <div class="card">
            <div class="face front">
                <h2>正面</h2>
                <p>这是卡片的正面内容。</p>
            </div>
            <div class="face back">
                <h2>背面</h2>
                <p>这是卡片的背面内容。</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS样式

/* styles.css */

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.scene {
    perspective: 1000px; /* 观察者视角距离 */
    width: 300px;
    height: 400px;
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; /* 保持3D空间 */
    transition: transform 1s; /* 过渡效果 */
}

.card:hover {
    transform: rotateY(180deg); /* 翻转效果 */
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* 隐藏背面 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.front {
    background-color: #4CAF50;
    color: white;
}

.back {
    background-color: #2196F3;
    color: white;
    transform: rotateY(180deg); /* 背面旋转180度 */
}

解释

1. HTML结构:

   • div.scene: 作为3D场景的容器，设置了透视效果。
   • div.card: 卡片元素，包含正面和背面两个面。
   • div.face.front: 卡片的正面内容。
   • div.face.back: 卡片的背面内容。

2. CSS样式:

   • body: 设置页面居中显示。
   • scene: 设置透视效果，使3D变换更明显。
   • card: 设置卡片的宽度和高度，并启用3D变换。
   • card:hover: 当鼠标悬停时，卡片绕Y轴旋转180度。
   • face: 设置卡片面的样式，包括背景颜色、边框和阴影。
   • front: 设置正面面的背景颜色和文字颜色。
   • back: 设置背面面的背景颜色和文字颜色，并旋转180度以隐藏背面。