CSS3动画animation效果怎么实现

CSS3的animation属性可以让元素在不依赖JavaScript的情况下实现复杂的动态效果，它的核心是通过定义关键帧和配置动画属性来完成动效制作，整体实现逻辑清晰，上手难度不高。

CSS3动画的核心组成

CSS3动画主要由两部分组成，分别是@keyframes关键帧规则和animation系列属性，两者配合才能实现完整的动画效果。

1. @keyframes关键帧规则

@keyframes用来定义动画在不同阶段的状态，你可以指定动画从开始到结束的各个时间点的样式变化，浏览器会自动补全中间的过渡效果。

关键帧的写法支持两种百分比形式，一种是直接用from和to代表起始和结束状态，另一种是用0%到100%的进度来定义多个节点：

/* 简单的关键帧定义，从起始到结束改变背景色 */
@keyframes colorChange {
  from {
    background-color: #ff0000;
  }
  to {
    background-color: #00ff00;
  }
}

/* 多节点的关键帧定义，在50%进度时增加额外状态 */
@keyframes multiStep {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(100px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(200px);
    opacity: 1;
  }
}

2. animation系列属性

定义好关键帧之后，需要通过animation相关属性把动画绑定到目标元素上，常用的属性如下：

• animation-name：指定要使用的@keyframes名称，需要和定义的关键帧名称一致
• animation-duration：动画完成一个周期需要的时长，单位是秒(s)或者毫秒(ms)
• animation-timing-function：动画的速度曲线，常用值有linear(匀速)、ease(慢快慢)、ease-in(慢开始)等
• animation-delay：动画延迟多久开始执行，单位同样是s或者ms
• animation-iteration-count：动画重复的次数，infinite表示无限循环
• animation-direction：动画播放方向，normal是正常播放，alternate是奇偶次反向播放
• animation-fill-mode：动画执行前后的样式状态，forwards表示结束后保持最后一帧的样式

这些属性可以分开写，也可以用animation简写属性一次性配置，简写顺序没有严格要求，但是建议按照名称、时长、速度曲线、延迟、次数、方向、填充模式的顺序书写，可读性更好。

完整实现示例

下面通过一个实际的例子演示完整的动画实现过程，这个例子会让一个方块元素从左向右移动，同时改变背景色，并且无限循环播放：

/* 定义关键帧动画 */
@keyframes moveAndChange {
  0% {
    transform: translateX(0);
    background-color: #409eff;
  }
  100% {
    transform: translateX(300px);
    background-color: #f56c6c;
  }
}

/* 目标元素的样式和动画绑定 */
.box {
  width: 100px;
  height: 100px;
  /* 简写形式绑定动画：名称 时长 速度曲线 延迟 次数 方向 填充模式 */
  animation: moveAndChange 2s ease 0s infinite normal forwards;
}

对应的HTML结构只需要一个类名为box的元素即可：

<div class="box"></div>

常见问题说明

在实际使用过程中，有几个需要注意的点：

• 如果动画没有生效，首先检查@keyframes的名称和animation-name是否完全一致，包括大小写
• animation-duration必须设置，否则默认时长为0，动画不会显示
• 使用transform属性做位移、旋转等变化时，不会影响文档流的正常布局，比修改margin、top等属性性能更好
• 如果需要兼容老版本浏览器，可以添加浏览器前缀，比如@-webkit-keyframes，不过现在大部分现代浏览器已经不需要前缀了

CSS3动画适合实现简单的、不需要复杂交互控制的动效，如果需要更精细的控制，比如暂停、反向播放、获取动画进度等，还是建议结合JavaScript来实现。

CSS3animation@keyframes动画属性过渡效果修改时间：2026-06-07 03:05:45