如何通过css @keyframes实现元素动画-css教程-PHP中文网

如何通过css @keyframes实现元素动画

P粉602998670

发布： 2025-09-19 19:34:01

原创

974人浏览过

<p>CSS @keyframes 可创建动画，通过定义不同时间点的样式实现过渡。使用 @keyframes 定义动画名称与关键帧（0% 到 100% 或 from/to），设置属性变化；再用 animation 属性将动画应用到元素，可配置时长、延迟、次数等。通过 animation-iteration-count: infinite 实现循环播放；结合 :hover 与 animation-play-state 可控制悬停触发动画。复杂动画可结合 transform 与多关键帧实现位移、旋转、颜色渐变等效果。为兼容旧浏览器，需添加 -webkit-、-moz- 等前缀，但现代开发可用 Autoprefixer 自动处理。JavaScript 可通过 classList 控制类名添加/移除来启停动画，或直接修改 style.animation 属性动态调整参数。性能优化建议：优先使用 transform 和 opacity，避免重排重绘；减少动画元素数量；使用 will-change 提示浏览器优化；必要时通过 translateZ(0) 或 backface-visibility 启用硬件加速，确保动画流畅。</p>

如何通过css @keyframes实现元素动画

CSS @keyframes 规则允许你创建动画，通过指定元素在不同时间点的样式，实现平滑过渡。它本质上定义了一个动画序列，你可以将其应用于任何HTML元素。

解决方案

定义 @keyframes 规则：

使用
```
@keyframes
```
登录后复制
关键字，后跟动画名称（自定义），然后是一组关键帧。每个关键帧使用百分比表示动画的进度（0% 表示动画的开始，100% 表示动画的结束）。在每个关键帧中，定义你想要元素具有的CSS属性。

立即学习“前端免费学习笔记（深入）”；
```
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
```
登录后复制
将动画应用到元素：

使用
```
animation
```
登录后复制
属性将动画应用到HTML元素。
```
animation
```
登录后复制
属性是一个简写属性，可以设置动画的名称、持续时间、延迟、迭代次数等。
```
.element {
  animation-name: fadeIn;
  animation-duration: 1s;
}
```
登录后复制
当然，你也可以使用更详细的写法：
```
.element {
  animation: fadeIn 1s forwards; /* forwards 保持动画结束时的状态 */
}
```
登录后复制

如何让动画循环播放？

使用

animation-iteration-count

登录后复制

属性控制动画的循环次数。设置为

infinite

登录后复制

可以让动画无限循环。

.element {
  animation: rotate 2s linear infinite; /* linear 使动画匀速 */
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

登录后复制

如何在鼠标悬停时触发动画？

可以使用

:hover

登录后复制

伪类结合

animation-play-state

登录后复制

属性。

.element {
  animation: pulse 1s infinite alternate; /* alternate 使动画正反交替 */
  animation-play-state: paused;
}

.element:hover {
  animation-play-state: running;
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

登录后复制

这里，动画默认暂停，当鼠标悬停时，动画开始播放。

alternate

登录后复制

关键字让动画在每次迭代时改变方向，产生脉冲效果。

如何实现更复杂的动画效果？

可以结合

transform

登录后复制

属性和多个关键帧，实现更复杂的动画效果。例如，创建一个元素移动并改变颜色的动画：

.element {
  animation: moveAndChangeColor 3s forwards;
}

@keyframes moveAndChangeColor {
  0% {
    transform: translateX(0) rotate(0deg);
    background-color: red;
  }
  50% {
    transform: translateX(100px) rotate(180deg);
    background-color: blue;
  }
  100% {
    transform: translateX(200px) rotate(360deg);
    background-color: green;
  }
}

登录后复制

这个例子中，元素在3秒内从左向右移动200像素，旋转360度，并且颜色从红色变为蓝色再变为绿色。需要注意的是，关键帧的百分比并不一定要是均匀分布的，你可以根据需要调整。

@keyframes 动画在不同浏览器上的兼容性问题？

虽然现代浏览器对

@keyframes

登录后复制

的支持已经很好，但在一些老旧浏览器上可能存在兼容性问题。为了解决这个问题，可以添加浏览器引擎前缀，比如

-webkit-

登录后复制

(Chrome, Safari),

-moz-

登录后复制

(Firefox),

-ms-

登录后复制

(Internet Explorer) 和

-o-

登录后复制

(Opera)。

.element {
  -webkit-animation: fadeIn 1s; /* Safari 和 Chrome */
  -moz-animation: fadeIn 1s; /* Firefox */
  -ms-animation: fadeIn 1s; /* Internet Explorer */
  -o-animation: fadeIn 1s; /* Opera */
  animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

登录后复制

不过，现在通常使用构建工具（例如 webpack, parcel）和 PostCSS 插件 (例如 Autoprefixer) 来自动添加这些前缀，这样可以减少手动编写代码的工作量。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

如何使用 JavaScript 控制 CSS 动画？

虽然 CSS 动画很强大，但有时需要使用 JavaScript 来更灵活地控制动画。例如，你可能需要在特定事件发生时启动动画，或者根据用户的交互来调整动画的参数。

可以使用 JavaScript 来添加、删除或修改元素的 CSS 类，从而控制动画的播放。

const element = document.querySelector('.element');

// 添加类名来启动动画
element.classList.add('animate');

// 移除类名来停止动画
element.addEventListener('animationend', () => {
  element.classList.remove('animate');
});

登录后复制

在这个例子中，

animate

登录后复制

类定义了动画效果。当添加

animate

登录后复制

类时，动画开始播放。当动画播放结束后，

animationend

登录后复制

事件被触发，然后移除

animate

登录后复制

类，停止动画。

另一种方法是直接使用 JavaScript 来修改元素的

style

登录后复制

属性，从而控制动画的参数。

const element = document.querySelector('.element');

element.style.animationDuration = '2s'; // 设置动画持续时间
element.style.animationDelay = '0.5s'; // 设置动画延迟
element.style.animationIterationCount = 'infinite'; // 设置动画循环次数

登录后复制

这种方法更加灵活，可以根据需要动态地调整动画的参数。

动画性能优化：如何避免卡顿？

CSS 动画的性能至关重要，如果动画过于复杂或者没有进行优化，可能会导致页面卡顿，影响用户体验。

以下是一些优化 CSS 动画性能的技巧：

使用
```
transform
```
登录后复制
和
opacity
登录后复制
属性：这些属性通常由 GPU 处理，性能更高。避免使用会触发重排（reflow）和重绘（repaint）的属性，例如
```
width
```
登录后复制
、
```
height
```
登录后复制
、
```
top
```
登录后复制
、
```
left
```
登录后复制
等。
减少动画元素的数量： 动画元素越多，浏览器需要处理的计算量就越大。尽量减少动画元素的数量，或者使用 CSS Sprites 等技术来优化资源。
使用
```
will-change
```
登录后复制
属性：
```
will-change
```
登录后复制
属性可以提前告诉浏览器哪些属性将会发生变化，从而让浏览器提前进行优化。
```
.element {
  will-change: transform, opacity;
}
```
登录后复制
避免使用复杂的 CSS 选择器： 复杂的 CSS 选择器会降低性能，尽量使用简单的 CSS 选择器。
使用硬件加速： 某些浏览器会自动启用硬件加速，但有时需要手动启用。可以使用
```
transform: translateZ(0);
```
登录后复制
或
```
backface-visibility: hidden;
```
登录后复制
来强制启用硬件加速。