css的animation用法

2024年2月8日发(作者：)

css的animation用法

CSS的animation属性用于在元素上创建动画效果。它可以让元素从一种样式逐渐过渡到另一种样式，创建平滑的动画效果。

以下是CSS animation的基本语法：

```css

.selector {

animation-name: animationName;

animation-duration: time;

animation-timing-function: timingFunction;

animation-delay: time;

animation-iteration-count: count;

animation-direction: direction;

animation-fill-mode: fillMode;

animation-play-state: playState;

}

```

解释一下每个属性的含义：

- `animation-name`：指定要应用的动画的名称，可以是CSS关键字或自定义动画名称。

- `animation-duration`：指定动画完成一次循环的时间，以秒或毫秒为单位。

- `animation-timing-function`：指定动画的时间曲线，控制动画的加速和减速效果。

- `animation-delay`：指定动画开始之前的延迟时间，以秒或毫秒为单位。

- `animation-iteration-count`：指定动画循环的次数，可以是一个整数或关键字（如`infinite`表示无限循环）。

- `animation-direction`：指定动画播放的方向，可以是`normal`（正向播放）、`reverse`（反向播放）或`alternate`（正向反向交替播放）等。

- `animation-fill-mode`：指定动画在播放前后如何应用样式，可以是`none`（不应用任何样式）、`forwards`（保持最后一帧的样式）或`backwards`（保持第一帧的样式）等。

- `animation-play-state`：指定动画的播放状态，可以是`running`（运行中）或`paused`（暂停中）。

除了上述属性之外，还可以使用`@keyframes`规则来定义动画的关键帧。关键帧是动画开始、结束或其他中间阶段的样式。以下是一个简单的示例：

```css

@keyframes move {

0% { transform: translateX(0); }

50% { transform: translateX(100px); }

100% { transform: translateX(0); }

}

.selector {

animation-name: move;

animation-duration: 3s;

animation-timing-function: ease;

animation-iteration-count: infinite;

}

```

以上示例定义了一个名为`move`的动画，它在0%、50%和100%处使用了不同的`transform`样式。然后，我们将该动画应用到`.selector`选择器上，使其持续3秒，使用`ease`时间曲线，并无限循环播放。

可以根据具体需求调整这些属性，实现各种各样的动画效果。希望这些信息对你有所帮助！