HTML5、CSS3（2）

CSS3 动画

1. 动画基础

创建与调用动画

• 创建动画：使用 @keyframes 规则

• 调用动画：使用 animation 属性

animation 参数值

animation: 
  name            // 动画名称
  duration        // 动画持续时间
  timing-function // 动画速度曲线
  delay           // 动画延迟时间
  iteration-count // 动画播放次数
  direction       // 动画是否反向播放
  fill-mode       // 动画不播放时的样式
  play-state;     // 动画运行状态

各参数详细说明

1. animation-name

• 作用：指定要应用的 @keyframes 动画名称

• 值：

  • none：无动画（默认值）

  • keyframes-name：由 @keyframes 定义的动画名称

• 示例：

  animation-name: slide-in;

2. animation-duration

• 作用：定义动画完成一个周期所需时间

• 值：

  • 时间值（单位为秒s或毫秒ms）

  • 默认值为 0s（无动画）

• 示例：

  animation-duration: 2s;  /* 2秒完成一次动画 */

3. animation-timing-function

• 作用：定义动画的速度曲线

• 值：

  • ease：慢速开始，然后加速，最后减速（默认值）

  • linear：匀速

  • ease-in：慢速开始

  • ease-out：慢速结束

  • ease-in-out：慢速开始和结束

  • cubic-bezier(n,n,n,n)：自定义贝塞尔曲线

  • steps(n,start|end)：分步动画

• 示例：

  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

4. animation-delay

• 作用：定义动画开始前的延迟时间

• 值：

  • 时间值（单位为秒s或毫秒ms）

  • 默认值为 0s（无延迟）

  • 可以为负值（动画会从中间开始）

• 示例：

  animation-delay: 1.5s;  /* 延迟1.5秒后开始 */

5. animation-iteration-count

• 作用：定义动画播放次数

• 值：

  • number：具体数字（如 2 表示播放2次）

  • infinite：无限循环

  • 默认值为 1（播放一次）

• 示例：

  animation-iteration-count: infinite;  /* 无限循环 */

6. animation-direction

• 作用：定义动画是否反向播放

• 值：

  • normal：正常播放（默认）

  • reverse：反向播放

  • alternate：奇数次正向，偶数次反向

  • alternate-reverse：奇数次反向，偶数次正向

• 示例：

  animation-direction: alternate;  /* 交替方向 */

7. animation-fill-mode

• 作用：定义动画执行前后如何应用样式

• 值：

  • none：不应用任何样式（默认）

  • forwards：保持最后一个关键帧的样式

  • backwards：应用第一个关键帧的样式（含delay期间）

  • both：同时应用forwards和backwards

• 示例：

  animation-fill-mode: forwards;  /* 停在最后一帧 */

8. animation-play-state

• 作用：定义动画运行状态

• 值：

  • running：正在播放（默认）

  • paused：暂停

• 示例：

  animation-play-state: paused;  /* 暂停动画 */

使用示例

完整写法

.box {
  animation-name: slide;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

简写写法

.box {
  animation: slide 3s ease-in-out 0.5s 2 alternate forwards running;
}

注意事项

1. 简写属性中，animation-duration 必须出现在 animation-delay 之前

2. 至少需要指定 animation-name 和 animation-duration 才能使动画生效

3. 未指定的属性将使用默认值

4. 可以同时应用多个动画，用逗号分隔：

   animation: slide 3s ease, fade 2s linear 1s;

2. 创建动画原理

1. 通过 @keyframes (关键帧动画) 规则创建动画

2. 原理是将一套 CSS 样式逐渐变化为另一套样式

3. 可以使用百分比或关键词定义关键帧：

   • from = 0%

   • to = 100%

4. 最佳实践：始终定义 0% 和 100% 选择器

5. 在 CSS 样式中用 animation 属性应用动画

CSS3 3D变换

一、3D变换基础概念

1. 透视属性(perspective)

透视是创建3D效果的基础，它决定了元素在Z轴上的远近关系。

两种设置方式：

/* 方式1：给父元素设置，影响所有子元素 */
.parent {
  perspective: 1000px;
}

/* 方式2：给元素自身设置 */
.element {
  transform: perspective(500px) rotateY(45deg);
}

特性：

• 值越小，透视效果越强烈（类似近距离观察）

• 值越大，透视效果越弱（类似远距离观察）

• 推荐范围：500px-1200px

二、核心3D变换属性

1. 3D旋转

/* 单轴旋转 */
transform: rotateX(45deg);  /* 绕X轴旋转 */
transform: rotateY(45deg);  /* 绕Y轴旋转 */
transform: rotateZ(45deg);  /* 绕Z轴旋转 */

/* 复合旋转 */
transform: rotate3d(1, 1, 0, 45deg);  /* 自定义旋转轴 */

2. 3D位移

transform: translateZ(100px);  /* Z轴位移 */
transform: translate3d(100px, 100px, 100px);  /* 三维位移 */

3. 3D缩放

transform: scaleZ(1.5);  /* Z轴缩放 */
transform: scale3d(1.2, 1.2, 1.5);  /* 三维缩放 */

三、高级3D控制属性

1. transform-style

.parent {
  transform-style: preserve-3d;  /* 保持子元素3D空间 */
}

注意：

• 必须设置在3D变换的父元素上

• 默认值为flat（平面渲染）

2. perspective-origin

.container {
  perspective: 800px;
  perspective-origin: 25% 75%;  /* 改变视点位置 */
}

取值：

• 关键词：left/center/right, top/center/bottom

• 百分比或长度值

3. backface-visibility

.card {
  backface-visibility: hidden;  /* 背面不可见 */
}

应用场景：翻转卡片、3D立方体等需要隐藏背面的效果

四、实战案例解析

案例1：3D翻转卡片

<style>
  .card-container {
    perspective: 1000px;
    width: 200px;
    height: 200px;
  }
  .card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .card-front {
    background: blue;
  }
  .card-back {
    background: red;
    transform: rotateY(180deg);
  }
  .card-container:hover .card {
    transform: rotateY(180deg);
  }
</style>

<div class="card-container">
  <div class="card">
    <div class="card-face card-front">Front</div>
    <div class="card-face card-back">Back</div>
  </div>
</div>

案例2：3D立方体

<style>
  .cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
  }
  .face {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
  }
  .front { transform: translateZ(100px); background: red; }
  .back { transform: translateZ(-100px); background: green; }
  .left { transform: rotateY(-90deg) translateZ(100px); background: blue; }
  .right { transform: rotateY(90deg) translateZ(100px); background: yellow; }
  .top { transform: rotateX(90deg) translateZ(100px); background: purple; }
  .bottom { transform: rotateX(-90deg) translateZ(100px); background: orange; }
  
  @keyframes rotate {
    from { transform: rotateX(0) rotateY(0); }
    to { transform: rotateX(360deg) rotateY(360deg); }
  }
</style>

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face left">Left</div>
  <div class="face right">Right</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>

五、性能优化建议

1. 优先使用transform和opacity：这两个属性不会触发重排和重绘

2. 合理使用will-change：对即将进行3D变换的元素添加will-change: transform

3. 避免过度使用perspective：每个perspective都会创建新的层叠上下文

4. 硬件加速：使用transform: translateZ(0)触发GPU加速

六、浏览器兼容性处理

.element {
  -webkit-transform: perspective(500px) rotateY(45deg);  /* Chrome/Safari */
  -moz-transform: perspective(500px) rotateY(45deg);     /* Firefox */
  -ms-transform: perspective(500px) rotateY(45deg);      /* IE */
  transform: perspective(500px) rotateY(45deg);          /* 标准 */
}