CSS动画如何使用_keyframes与animation属性详解_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS动画如何使用_keyframes与animation属性详解

2025-11-15

浏览次数：次

返回列表

@keyframes定义动画关键帧，animation属性控制动画播放，二者结合实现网页流畅动画效果。

css动画如何使用_keyframes与animation属性详解

在CSS中，@keyframes 和 animation 属性配合使用，可以创建出丰富、流畅的动画效果。它们是实现网页动态视觉体验的核心工具之一。下面详细介绍它们的用法和关键细节。

1. 什么是 @keyframes？

@keyframes 是定义动画关键帧的规则，用来描述动画过程中某个时间点的样式状态。你可以把它理解为“动画剧本”，告诉浏览器元素在不同阶段应该是什么样子。

语法格式：

@keyframes 动画名称 {
  0% { 样式属性: 值; }
  50% { 样式属性: 值; }
  100% { 样式属性: 值; }
}

也可以简写为：

@keyframes slide {
from { tran

sform: translateX(0); }
to { transform: translateX(100px); }
}

其中 from 等价于 0%，to 等价于 100%。

2. animation 属性详解

定义好关键帧后，需要通过 animation 属性将动画应用到具体元素上。animation 是一个复合属性，包含多个子属性：

Visla

AI视频生成器，快速轻松地将您的想法转化为视觉上令人惊叹的视频。

100 查看详情 Visla

animation-name：指定 @keyframes 定义的动画名称。
animation-duration：动画完成一次所需的时间（如 2s、500ms）。
animation-timing-function：控制动画的速度曲线，如 ease、linear、ease-in-out 等。
animation-delay：动画开始前的延迟时间。
animation-iteration-count：动画播放次数，可设为数字或 infinite（无限循环）。
animation-direction：动画方向，如 normal（正向）、reverse（反向）、alternate（交替）等。
animation-fill-mode：动画外时间的样式状态，如 forwards（停在最后一帧）、backwards（第一帧样式）等。
animation-play-state：控制动画运行或暂停，值为 running 或 paused。

示例：

.animated-box {
  width: 100px;
  height: 100px;
  background: blue;
  animation: slide 2s ease-in-out 0.5s infinite alternate forwards;
}

3. 实际使用示例

下面是一个完整的例子，让一个方块从左移动到右，并改变背景色：

@keyframes moveAndChange {
  0% {
    transform: translateX(0);
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    transform: translateX(200px);
    background-color: blue;
  }
}

.box {
  width: 50px;
  height: 50px;
  background: red;
  animation: moveAndChange 3s linear infinite;
}

这个方块会在3秒内水平移动200px，同时颜色从红→绿→蓝变化，并无限循环。