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 定义的动画名称
示例：
css 复制代码
```
animation-name: slide-in;
```
复制代码

2. animation-duration

作用：定义动画完成一个周期所需时间
值：
- 时间值（单位为秒s或毫秒ms）
- 默认值为 0s（无动画）

示例：

css 复制代码

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)：分步动画

示例：

css 复制代码

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

复制代码

4. animation-delay

作用：定义动画开始前的延迟时间
值：
- 时间值（单位为秒s或毫秒ms）
- 默认值为 0s（无延迟）
- 可以为负值（动画会从中间开始）

示例：

css 复制代码

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

复制代码

5. animation-iteration-count

作用：定义动画播放次数
值：
- number：具体数字（如 2 表示播放2次）
- infinite：无限循环
- 默认值为 1（播放一次）

示例：

css 复制代码

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

复制代码

6. animation-direction

作用：定义动画是否反向播放
值：
- normal：正常播放（默认）
- reverse：反向播放
- alternate：奇数次正向，偶数次反向
- alternate-reverse：奇数次反向，偶数次正向

示例：

css 复制代码

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

复制代码

7. animation-fill-mode

作用：定义动画执行前后如何应用样式
值：
- none：不应用任何样式（默认）
- forwards：保持最后一个关键帧的样式
- backwards：应用第一个关键帧的样式（含delay期间）
- both：同时应用forwards和backwards

示例：

css 复制代码

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

复制代码

8. animation-play-state

作用：定义动画运行状态
值：
- running：正在播放（默认）
- paused：暂停

示例：

css 复制代码

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

复制代码

使用示例

完整写法

css 复制代码

.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;
}

复制代码

简写写法

css 复制代码

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

复制代码

注意事项

简写属性中，animation-duration 必须出现在 animation-delay 之前
至少需要指定 animation-name 和 animation-duration 才能使动画生效
未指定的属性将使用默认值
可以同时应用多个动画，用逗号分隔：
css 复制代码
```
animation: slide 3s ease, fade 2s linear 1s;
```
复制代码

2. 创建动画原理

通过 @keyframes (关键帧动画) 规则创建动画
原理是将一套 CSS 样式逐渐变化为另一套样式
可以使用百分比或关键词定义关键帧：
- from = 0%
- to = 100%
最佳实践：始终定义 0% 和 100% 选择器
在 CSS 样式中用 animation 属性应用动画

CSS3 3D变换

一、3D变换基础概念

1. 透视属性(perspective)

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

两种设置方式：

css 复制代码

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

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

复制代码

特性：

值越小，透视效果越强烈（类似近距离观察）
值越大，透视效果越弱（类似远距离观察）
推荐范围：500px-1200px

二、核心3D变换属性

1. 3D旋转

css 复制代码

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

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

复制代码

2. 3D位移

css 复制代码

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

复制代码

3. 3D缩放

css 复制代码

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

复制代码

三、高级3D控制属性

1. transform-style

css 复制代码

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

复制代码

注意：

必须设置在3D变换的父元素上
默认值为flat（平面渲染）

2. perspective-origin

css 复制代码

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

复制代码

取值：

关键词：left/center/right, top/center/bottom
百分比或长度值

3. backface-visibility

css 复制代码

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

复制代码

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

四、实战案例解析

案例1：3D翻转卡片

css 复制代码

<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立方体

css 复制代码

<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>

五、性能优化建议

优先使用transform和opacity：这两个属性不会触发重排和重绘
合理使用will-change ：对即将进行3D变换的元素添加will-change: transform
避免过度使用perspective：每个perspective都会创建新的层叠上下文
硬件加速 ：使用transform: translateZ(0)触发GPU加速

六、浏览器兼容性处理

css 复制代码

.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);          /* 标准 */
}

复制代码