动画 keyframes

CSS 动画利用 @keyframes 定义动画序列，再通过 animation 属性应用于元素，实现连续变化。

1. 定义关键帧

使用 @keyframes 定义动画的不同阶段样式。

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

2. 应用动画

使用 animation 属性设置动画名称、时长、节奏和次数等。

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

• 2s：动画持续时间
• ease-in-out：缓动函数
• infinite：无限循环

动画示例

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。