css制作动画

CSS 动画基础

CSS 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的中间状态，animation 控制动画的播放方式。

@keyframes example {
  0% { background-color: red; }
  50% { background-color: yellow; }
  100% { background-color: green; }
}

.element {
  animation: example 3s ease-in-out infinite;
}

关键属性说明

• animation-name: 指定 @keyframes 名称。
• animation-duration: 动画持续时间（如 2s）。
• animation-timing-function: 速度曲线（如 ease, linear）。
• animation-delay: 动画延迟时间（如 1s）。
• animation-iteration-count: 播放次数（如 infinite）。
• animation-direction: 播放方向（如 alternate 往返播放）。

过渡动画（Transition）

CSS 过渡用于在元素状态变化时平滑过渡效果，常用属性包括：

• transition-property: 指定过渡属性（如 all 或 opacity）。
• transition-duration: 过渡持续时间。
• transition-timing-function: 速度曲线。
• transition-delay: 过渡延迟。

.button {
  background: blue;
  transition: background 0.5s ease;
}
.button:hover {
  background: red;
}

动画性能优化

• 优先使用 opacity 和 transform 属性，它们可通过 GPU 加速。
• 避免频繁触发重排（如修改 width/height）。
• 使用 will-change 提示浏览器优化（如 will-change: transform）。

复杂动画示例

结合 transform 和 @keyframes 实现旋转与缩放：

@keyframes spin-scale {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.5); }
  100% { transform: rotate(360deg) scale(1); }
}

.box {
  animation: spin-scale 2s linear infinite;
}

动画事件监听

通过 JavaScript 监听动画事件：

• animationstart: 动画开始。
• animationend: 动画结束。
• animationiteration: 每次迭代触发。

const element = document.querySelector('.box');
element.addEventListener('animationend', () => {
  console.log('Animation finished');
});