CSS动画如何使用_keyframes与animation属性详解-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-15 09:09:36

原创

529人浏览过

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

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

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

1. 什么是 @keyframes？

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

语法格式：

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

也可以简写为：

立即学习“前端免费学习笔记（深入）”；

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

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

万兴爱画

万兴爱画AI绘画生成工具

查看详情

2. animation 属性详解

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

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，同时颜色从红→绿→蓝变化，并无限循环。