CSS 动画参数详解及示例 - 轻松实现炫酷效果

CSS 动画通过在元素上应用一系列的样式变化来创建动画效果。以下是 CSS 动画中常用的参数及示例：

1. animation-name：指定动画的名称，可以在 @keyframes 规则中定义动画的关键帧。示例：

@keyframes slide-in {
  0% { left: -100%; }
  100% { left: 0; }
}

.slide {
  animation-name: slide-in;
}

2. animation-duration：指定动画的持续时间，以秒（s）或毫秒（ms）为单位。示例：

.slide {
  animation-name: slide-in;
  animation-duration: 1s;
}

3. animation-timing-function：指定动画的时间函数，控制动画的加速和减速效果。常用的时间函数包括 linear（匀速）、ease（默认，慢-快-慢）、ease-in（慢-快）、ease-out（快-慢）、ease-in-out（慢-快-慢）。示例：

.slide {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

4. animation-delay：指定动画开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。示例：

.slide {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-delay: 0.5s;
}

5. animation-iteration-count：指定动画的重复次数，可以使用具体的次数（整数值）或 infinite 表示无限循环。示例：

.slide {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-iteration-count: 3;
}

6. animation-direction：指定动画的播放方向，包括 normal（默认，正向播放）、reverse（反向播放）、alternate（交替播放，正向-反向循环）和 alternate-reverse（交替播放，反向-正向循环）。示例：

.slide {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-direction: alternate;
}

7. animation-fill-mode：指定动画在非播放时间段的样式，包括 none（默认，无特殊处理）、forwards（保持最后一帧的样式）、backwards（保持第一帧的样式）和 both（同时应用 forwards 和 backwards）。示例：

.slide {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

8. animation-play-state：指定动画的播放状态，包括 running（默认，播放）和 paused（暂停）。示例：

.slide {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-play-state: paused;
}

以上是 CSS 动画中常用的参数及示例，通过调整这些参数的值，可以创建出各种不同的动画效果。