通过 CSS @keyframes 和 animation 属性实现了垂直无缝滚动的跑马灯效果

最新推荐文章于 2025-10-29 10:50:05 发布

原创

最新推荐文章于 2025-10-29 10:50:05 发布 · 1.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

通过 CSS `@keyframes` 和 `animation` 属性实现了垂直无缝滚动的跑马灯效果

1. 什么是animation

CSS 的 animation 属性是用来为元素添加动画效果的，可以让网页元素在页面上展示平滑的过渡和动感效果。animation 属性结合了多个子属性，它允许我们定义动画的名字、持续时间、延迟时间、动画的节奏等。以下是对 CSS 动画相关属性的详细解释：

1.1. `@keyframes` 规则

@keyframes 是 C SS 动画的核心，它用于定义动画的关键帧（即不同时间点的样式）。每个关键帧定义了动画的某个状态。通过这些关键帧，浏览器能够在动画过程中逐帧变化样式。

语法：

@keyframes animation-name {
   
   
  0% {
   
   
    /* 动画开始时的样式 */
  }
  100% {
   
   
    /* 动画结束时的样式 */
  }
}

0% 表示动画的开始状态，100% 表示动画的结束状态。你还可以使用中间百分比值，比如 50% 来定义动画的中间状态。

示例：

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

1.2. `animation` 属性

animation 属性是简写属性，它集成了多个与动画相关的属性。可以通过一个单一的声明来控制动画的各种特性。

语法：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

1.3. 各子属性解释

animation-name：指定动画的名字。这个名字与 @keyframes 中定义的动画名称一致。
```
animation-name: slide;
```
animation-duration：指定动画的持续时间，即动画完成一次的时间长度。单位可以是 s（秒）或 ms（毫秒）。
```
animation-duration: 2s;
```
animation-timing-function：定义动画的速度曲线，决定了动画开始、进行和结束时的速率。常见值有：
- linear：匀速，动画速度始终不变。
- ease：默认值，先慢后快，再慢。
- ease-in：开始时慢，之后加速。
- ease-out：开始时快，之后减速。
- ease-in-out：开始和结束时都慢，中间加速。
- cubic-bezier(n, n, n, n)：自定义贝塞尔曲线。
```
animation-timing-function: ease-in-out;
```
animation-delay：定义动画开始之前的延迟时间。单位可以是 s 或 ms。
```
animation-delay: 1s;
```
animation-iteration-count：定义动画的播放次数。可以设置为整数值，或者使用 infinite 来让动画无限循环。
```
animation-iteration-count: infinite;
```
animation-direction：控制动画的播放方向。常见值包括：
- normal：正常播放（默认）。
- reverse：反向播放。
- alternate：交替播放（每次动画执行方向相反）。
- alternate-reverse：反向交替播放
```
animation-direction: alternate;
```
animation-fill-mode：控制动画结束后的状态，指定动画结束后元素的样式。常见值包括：
- none：没有效果（默认）。
- forwards：保持动画结束时的样式。
- backwards：动画开始前使用关键帧的样式。
- both：同时应用 forwards 和 backwards
```
animation-fill-mode: forwards;
```
animation-play-state：控制动画的播放状态。可以设置为
- running：动画正在运行（默认）。
- paused：动画暂停。
```
animation-play-state: paused;
```

完整示例：

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

.box {
   
   
  width: 100px;
  height: 100px;
  background-color