动画 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：无限循环

动画示例

loading