css制作简易动画

CSS 制作简易动画的方法

使用 @keyframes 定义动画 通过 @keyframes 规则定义动画的关键帧，指定动画在不同时间点的样式变化。例如，创建一个从左向右移动的动画：

@keyframes slideRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

应用动画到元素 使用 animation 属性将动画应用到目标元素，设置动画名称、持续时间、速度曲线等参数：

.box {
  animation: slideRight 2s ease-in-out infinite;
}

常用动画属性

• animation-name: 指定 @keyframes 动画名称。
• animation-duration: 设置动画持续时间（如 2s）。
• animation-timing-function: 控制动画速度曲线（如 ease-in-out）。
• animation-iteration-count: 定义动画播放次数（如 infinite 表示无限循环）。

示例：淡入淡出效果

@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.element {
  animation: fadeInOut 3s linear infinite;
}

使用 transition 制作过渡动画 对于简单的状态变化（如悬停效果），可以使用 transition 实现平滑过渡：

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

性能优化建议

• 优先使用 transform 和 opacity 属性，这些属性不会触发重排，性能更好。
• 避免频繁触发动画，可通过 will-change 属性提示浏览器优化。

调试工具

• 浏览器开发者工具中的 Animations 面板可检查动画细节。
• 使用 animation-play-state: paused 暂停动画以便调试。