css3制作简单动画

使用 @keyframes 定义动画

通过 @keyframes 规则定义动画的关键帧，指定动画从开始到结束的样式变化。例如，创建一个元素从左移动到右的动画：

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

应用动画到元素

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

.box {
  width: 50px;
  height: 50px;
  background-color: blue;
  animation: slideRight 2s ease-in-out infinite;
}

• slideRight：动画名称。
• 2s：动画持续时间为 2 秒。
• ease-in-out：速度曲线（先加速后减速）。
• infinite：无限循环播放。

多关键帧动画

定义更复杂的动画时，可以使用百分比指定多个关键帧：

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

控制动画播放状态

通过 animation-play-state 暂停或继续动画：

.box:hover {
  animation-play-state: paused;
}

动画属性简写

animation 是以下属性的简写：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

示例：

.box {
  animation: fadeIn 3s linear 1s 5 alternate;
}

透明度渐变示例

实现元素淡入效果：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element {
  animation: fadeIn 1.5s ease-out;
}

旋转动画

结合 rotate 实现旋转效果：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 2s linear infinite;
}

注意事项

• 使用 transform 和 opacity 属性制作动画性能更优，避免使用 left/top。
• 通过 will-change 提示浏览器优化动画元素：

  .box {
    will-change: transform;
  }