css动画

CSS 动画使网页元素能够在一定时间内通过一系列的样式变化呈现动态效果。你可以使用 @keyframes 规则定义动画的关键帧，并通过 animation 属性将这些动画应用到元素上

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

1. 关键帧（Keyframes）

关键帧定义了动画的不同阶段和状态。使用 @keyframes 规则可以创建这些阶段。例如：

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

这里定义了一个移动动画，使元素在水平上移动100像素，然后返回到原始位置。

2. 动画属性

2.1 animation-name: 设定要使用的关键帧动画的名称。

.example {
  animation-name: move;
}

2.2 animation-duration: 指定动画的持续时间。

例如 2s 表示动画持续2秒。

.example {
  animation-duration: 2s;
}

2.3 animation-timing-function: 定义动画的速度曲线（过渡效果）。

常见的值有：

• linear: 动画速度保持一致。
• ease: 开始和结束时速度较慢，中间速度较快。
• ease-in: 动画开始时速度较慢。
• ease-out: 动画结束时速度较慢。
• ease-in-out: 动画开始和结束时速度较慢。

.example {
  animation-timing-function: ease-in-out;
}

2.4 animation-delay: 定义动画开始之前的延迟时间。

例如 1s 表示动画在1秒后开始。

.example {
  animation-delay: 1s;
}

2.5 animation-iteration-count: 设置动画的播放次数。

infinite 表示无限次播放，数字值表示具体的播放次数。

.example {
  animation-iteration-count: infinite;
}

2.6 animation-direction: 控制动画的播放方向。

常见的值有：

• normal: 正常播放方向。
• reverse: 反向播放。
• alternate: 正常和反向交替播放。
• alternate-reverse: 反向和正常交替播放。

.example {
  animation-direction: alternate;
}

2.7 animation-fill-mode: 控制动画完成后的状态。

常见的值有：

• none: 默认值，动画完成后恢复到初始状态。
• forwards: 保持动画的最后状态。
• backwards: 保持动画的初始状态。
• both: 同时应用 forwards 和 backwards。

.example {
  animation-fill-mode: forwards;
}

3. 应用动画

将上述属性组合起来应用于元素：

.example {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

CSS 动画的简写属性是 animation，它可以同时设置多个动画相关的属性。语法如下：

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

.example {
  animation: move 2s ease-in 1s infinite alternate;
}

这里，move 是动画名称，2s 是持续时间，ease-in 是时间函数，1s 是延迟，infinite 表示无限次迭代，alternate 是动画方向。

4. 性能优化

• 使用 transform 和 opacity: 尽量使用这些属性，因为它们不触发布局重排或重绘，性能开销较小。
• 避免复杂的布局变化: 避免动画涉及元素尺寸、位置等会导致浏览器频繁重排的属性。
• 使用 will-change: 提前告知浏览器哪些属性将会发生变化，帮助浏览器优化性能。

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

5. 过渡与动画的区别

• 过渡: 实现元素状态之间的平滑过渡，例如 :hover 状态。使用 transition 属性。

.example {
  transition: background-color 0.5s ease;
}
.example:hover {
  background-color: red;
}

• 动画: 更复杂的序列和阶段，不依赖于元素状态变化。使用 @keyframes 和 animation 属性。

6 兼容性和测试

确保动画在各种浏览器中表现一致，尤其是在旧版本的浏览器中，可能需要添加浏览器前缀（如 -webkit-）

.example {
  -webkit-animation: move 2s ease-in-out infinite;
  -moz-animation: move 2s ease-in-out infinite;
  -ms-animation: move 2s ease-in-out infinite;
  -o-animation: move 2s ease-in-out infinite;
  animation: move 2s ease-in-out infinite;
}

• -webkit-: 由 WebKit 浏览器引擎使用的前缀，主要用于 Chrome、Safari 和较旧版本的 Android 浏览器。

-webkit-animation: move 2s ease-in-out infinite;

• -moz-: 由 Mozilla Firefox 浏览器使用的前缀。

-moz-animation: move 2s ease-in-out infinite;

• -ms-: 由 Microsoft Internet Explorer 和 Edge 浏览器使用的前缀。

-ms-animation: move 2s ease-in-out infinite;

• -o-: 由 Opera 浏览器使用的前缀。

-o-animation: move 2s ease-in-out infinite;