CSS动画效果怎么制作_CSS动画制作详细步骤

雪夜

发布时间：2025-09-12 15:27:01

909人浏览过

来源于php中文网

原创

CSS动画的核心是@keyframes定义动画关键帧，再通过animation属性应用到元素。使用transform和opacity可提升性能，避免触发布局重排。优先选择CSS动画实现简单过渡效果，复杂交互动画则结合JavaScript或使用GSAP等库。调试时利用浏览器开发者工具的动画面板，检查关键帧、属性冲突及动画参数，确保流畅体验。

css动画效果怎么制作_css动画制作详细步骤

CSS动画效果的制作，核心在于通过

@keyframes

规则定义动画的各个阶段，然后将这些动画应用到目标HTML元素上。简单来说，就是告诉浏览器一个元素应该如何从一个状态平滑地过渡到另一个状态，比如改变颜色、位置、大小，甚至旋转和透明度。这个过程不需要JavaScript，完全由CSS驱动，通常性能也更好。

解决方案要制作一个CSS动画，你需要理解并运用两个主要部分：

@keyframes

规则和一系列

animation

属性。

1. 定义动画的关键帧 (

@keyframes

)

@keyframes

规则是动画的“剧本”，它描述了动画在不同时间点（或百分比）应该呈现的状态。

@keyframes myAnimation {
  /* 动画开始状态 */
  from {
    transform: translateX(0);
    opacity: 1;
  }
  /* 动画结束状态 */
  to {
    transform: translateX(100px);
    opacity: 0.5;
  }
}

或者，你可以定义多个中间状态：

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

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

这里的

myAnimation

和

bounce

是你给动画起的名字。

from

等同于

0%

，

to

等同于

100%

。

2. 将动画应用到元素 (

animation

属性)

定义好关键帧后，你需要将它应用到你想要动画的HTML元素上。这通过一系列

animation

属性来完成。最常见的是使用

animation

简写属性。

.my-element {
  animation: myAnimation 2s ease-in-out infinite alternate;
  /* 等同于以下独立属性的组合： */
  /* animation-name: myAnimation; */
  /* animation-duration: 2s; */
  /* animation-timing-function: ease-in-out; */
  /* animation-iteration-count: infinite; */
  /* animation-direction: alternate; */
  /* animation-delay: 0s; */
  /* animation-fill-mode: none; */
  /* animation-play-state: running; */
}

这里是各个

animation

子属性的简要说明：

```
animation-name
```
: 引用你定义的
```
@keyframes
```
规则的名称。
```
animation-duration
```
: 动画完成一个周期所需的时间（例如：
```
2s
```
或
```
2000ms
```
）。
```
animation-timing-function
```
: 动画的速度曲线（例如：
```
ease
```
,
```
linear
```
,
```
ease-in
```
,
```
ease-out
```
,
```
ease-in-out
```
,
```
cubic-bezier(n,n,n,n)
```
）。它决定了动画在不同阶段的加速和减速方式。
```
animation-delay
```
: 动画开始前的延迟时间。
```
animation-iteration-count
```
: 动画重复的次数（例如：
```
2
```
,
```
3
```
，或
```
infinite
```
表示无限循环）。
```
animation-direction
```
: 动画是向前播放、向后播放还是交替播放（例如：
```
normal
```
,
```
reverse
```
,
```
alternate
```
,
```
alternate-reverse
```
）。
```
animation-fill-mode
```
: 动画结束或开始时，元素如何应用动画样式（例如：
```
none
```
,
```
forwards
```
,
```
backwards
```
,
```
both
```
）。
```
forwards
```
会让元素停留在动画的最终状态，这在很多场景下非常有用。
```
animation-play-state
```
: 动画是播放还是暂停（
```
running
```
或
```
paused
```
）。

一个完整的例子：让一个方块来回移动并弹跳

HTML:

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  position: relative; /* 为了transform的位移效果 */
  animation: moveAndBounce 3s ease-in-out infinite alternate;
}

@keyframes moveAndBounce {
  0% {
    left: 0;
    transform: translateY(0);
    background-color: dodgerblue;
  }
  50% {
    left: 200px;
    transform: translateY(-50px); /* 向上跳跃 */
    background-color: lightcoral;
  }
  100% {
    left: 400px;
    transform: translateY(0);
    background-color: dodgerblue;
  }
}

这个例子展示了如何通过多个属性（

left

transform

background-color

）在同一个关键帧中进行动画，实现一个相对复杂的运动。

CSS动画和JavaScript动画有什么区别，我该如何选择？

这确实是一个老生常谈但又不得不提的问题。我个人觉得，在选择动画技术时，没有绝对的“最好”，只有“最适合”。CSS动画和JavaScript动画各有其优势和适用场景。

CSS动画的特点：

声明式 (Declarative)： 你只需要声明动画的起始、结束状态和一些参数，浏览器负责具体的执行。这让代码更简洁，也更容易理解。
性能优势： 浏览器通常会对CSS动画进行优化，比如将其放在独立的合成器线程中执行，从而利用GPU加速。这意味着即使主线程繁忙，CSS动画也能保持流畅，减少卡顿。对于一些简单的视觉效果，比如元素的淡入淡出、位移、旋转等，CSS动画几乎是首选，因为它能提供非常平滑的用户体验。
维护简单： 对于简单的UI过渡和效果，CSS动画的代码量通常更少，维护起来也更方便。
局限性： CSS动画的控制力相对有限。它无法直接获取动画过程中的中间状态，也难以实现复杂的逻辑控制，比如根据用户输入动态调整动画路径，或者在动画的某个特定时刻触发其他事件。链式动画（一个动画结束后立即开始另一个）也相对麻烦，可能需要借助
```
animation-delay
```
或者多个动画同时作用。

JavaScript动画的特点：

命令式 (Imperative)： 你需要编写代码来一步步地控制动画的每个细节，包括计算中间值、设置定时器等。这赋予了极高的灵活性。
强大的控制力： JavaScript可以实现任何你想要的复杂动画逻辑。你可以根据用户的交互、数据变化来动态创建、修改、暂停、恢复动画。它能精确控制动画的每个帧，实现更复杂的物理效果、路径动画、时间轴控制等。
生态丰富： 像GSAP (GreenSock Animation Platform) 这样的JavaScript动画库提供了强大的API，极大地简化了复杂动画的开发，并且通常比手动编写的JS动画性能更好，因为它也做了很多优化。
潜在的性能问题： 如果不注意优化，JavaScript动画可能会占用主线程，导致页面卡顿。尤其是在动画大量DOM属性时，可能会频繁触发布局（reflow）和绘制（repaint）。不过，现代的JS动画库和一些最佳实践（比如只动画
```
transform
```
和
```
opacity
```
）可以很大程度上缓解这个问题。

我该如何选择？

Thiings

免费的拟物化图标库

下载

我的经验是：

简单的UI效果和过渡（比如按钮hover效果、菜单展开/收起、加载指示器）： 优先使用CSS动画。它性能好，代码简洁，完全足够。
复杂的交互动画、数据驱动的动画、游戏中的动画、需要精确控制时间轴和逻辑的动画： 毫无疑问，选择JavaScript动画。这时候，一个好的JS动画库（比如GSAP）能帮你省下大量时间和精力。
组合使用： 很多时候，最佳实践是CSS和JavaScript结合使用。比如，你可以用CSS来处理元素的初始状态和简单的过渡，而用JavaScript来触发这些CSS动画（通过添加/移除类名），或者在动画的特定阶段执行一些JS逻辑。这种方式既能利用CSS的性能优势，又能享受JS的灵活性。

记住，性能是关键。无论选择哪种方式，都要尽量避免动画那些会触发布局和绘制的CSS属性，多使用

transform

和

opacity

。

如何优化CSS动画的性能，避免页面卡顿？

性能优化对于任何动画来说都是至关重要的，尤其是在移动设备上。一个卡顿的动画会严重影响用户体验。我总结了一些在实际工作中非常有效的优化策略：

优先动画
```
transform
```
和
opacity
属性：这是最重要的一个点，没有之一。
```
transform
```
（包括
```
translate
```
,
```
scale
```
,
```
rotate
```
,
```
skew
```
）和
```
opacity
```
是所谓的“合成器属性”（Compositor-only properties）。当它们发生变化时，浏览器通常可以直接在GPU上操作元素的合成层，而不需要重新计算布局（reflow）或重新绘制（repaint）整个页面。这大大减少了主线程的负担，使得动画更加流畅。
- 错误示例 (会引起布局/绘制)： 动画
```
width
```
  ,
```
height
```
  ,
```
margin
```
  ,
```
padding
```
  ,
```
top
```
  ,
```
left
```
  等。
- 正确示例 (优先使用)： 动画
```
transform: translateX()
```
  ,
```
transform: scale()
```
  ,
```
opacity
```
  。
使用
```
will-change
```
属性（但要谨慎）：
```
will-change
```
是一个CSS属性，它可以提前告知浏览器哪些属性将要发生变化。这样，浏览器可以在动画开始前做一些优化准备，比如创建独立的合成层。
```
.element-to-animate {
  will-change: transform, opacity; /* 告诉浏览器这两个属性会变化 */
}
```
注意：
```
will-change
```
不能滥用！它会消耗额外的内存和CPU资源。只在即将发生复杂动画的元素上使用它，并且在动画结束后及时移除或重置它。过度使用反而可能导致性能下降。我的经验是，只有在确实观察到性能问题，并且动画元素比较少的情况下，才考虑使用它。
避免在动画中使用复杂的阴影和滤镜：
```
box-shadow
```
,
```
text-shadow
```
,
```
filter
```
等属性在动画过程中会非常消耗性能，因为它们需要大量的计算来渲染每一帧。如果非要用，尽量使用简单的、模糊半径较小的阴影，或者考虑用图片替代。
硬件加速的“小技巧”（现在不常用，但了解一下无妨）： 以前，我们可能会用
```
transform: translateZ(0)
```
或
```
backface-visibility: hidden
```
来“欺骗”浏览器，让它为元素创建一个独立的合成层，从而开启硬件加速。但现在，现代浏览器已经足够智能，对于
```
transform
```
和
```
opacity
```
等属性，它们会自动进行硬件加速。所以，除非你真的遇到性能瓶颈且确定是合成层问题，否则不建议随意添加这些属性，因为它们也可能带来一些渲染上的小问题（比如文本模糊）。
减少动画元素的数量和复杂度： 如果页面上有大量元素同时进行动画，即使是简单的
```
transform
```
和
```
opacity
```
动画，也可能对性能造成压力。尽量控制同时动画的元素数量，并简化每个动画的复杂度。
使用
```
requestAnimationFrame
```
进行JavaScript驱动的动画（如果必须用JS）： 如果你的动画逻辑确实需要JavaScript来驱动，那么请务必使用
```
requestAnimationFrame
```
。它能确保你的动画回调函数在浏览器下一次重绘之前执行，从而与浏览器的渲染周期同步，避免掉帧和卡顿。

总结一下，优化CSS动画性能的核心思想就是：让浏览器做它最擅长的事情，避免触发昂贵的计算。 多用

transform

和

opacity

，少碰会引起布局和绘制的属性，并谨慎使用

will-change

。

CSS动画的常见陷阱和调试技巧有哪些？

在制作CSS动画的过程中，我们经常会遇到一些让人摸不着头脑的问题。这些“坑”有些是粗心大意，有些则是对CSS动画机制理解不深。不过别担心，掌握一些调试技巧能让你事半功倍。

常见的陷阱：

动画不播放或只播放一次：
- animation-name
  拼写错误：这是最常见的，
```
@keyframes
```
  的名称和
```
animation-name
```
  属性的值必须完全匹配。
- animation-duration
  缺失或为0：如果没有设置持续时间，动画就不会发生。
- animation-fill-mode
  设置不当：动画结束后元素会跳回初始状态，而不是停留在最终状态。如果想让它停在最终状态，记得设置
```
animation-fill-mode: forwards;
```
  。
- 元素被
  display: none;
  隐藏：
```
display: none;
```
  的元素是不会参与布局和渲染的，自然也不会有动画。如果你想隐藏元素，并对其进行动画，考虑使用
```
visibility: hidden;
```
  配合
```
opacity: 0;
```
  。
动画效果不符合预期：
- animation-timing-function
  选择不当：不同的速度曲线会产生截然不同的效果。
```
ease-in-out
```
  通常比较平滑，但如果想要更弹跳或更线性的效果，就需要尝试其他值或自定义
```
cubic-bezier
```
  。
- animation-direction
  混淆：
```
alternate
```
  和
```
alternate-reverse
```
  会改变动画播放的方向，如果不理解它们的行为，可能会导致动画来回播放的顺序不正确。
- 关键帧百分比设置错误： 比如
```
0%
```
  到
```
100%
```
  之间没有明确的过渡，或者百分比设置不连续。
- CSS属性冲突： 其他CSS规则（比如
```
transition
```
  或直接设置的样式）可能覆盖了动画中的某些属性。
```
!important
```
  虽然能解决冲突，但通常不是好方法，应该检查CSS优先级。
动画卡顿或不流畅：
- 动画了昂贵的CSS属性： 这是最主要的性能问题，如前面所说，动画
```
width
```
  ,
```
height
```
  ,
```
margin
```
  ,
```
padding
```
  等会触发布局和绘制的属性。
- 过多的动画元素： 即使是高性能的动画，如果同时有大量元素在动画，也可能导致性能下降。

调试技巧：

使用浏览器开发者工具的“动画”面板： 这是我调试CSS动画最常用的工具，简直是神器！
- Chrome DevTools: 打开开发者工具，切换到“Elements”面板，然后点击右侧的“Animations”选项卡（如果没看到，可能需要点击“更多工具”）。这个面板会显示页面上正在运行的所有CSS动画，你可以：
  - 暂停/播放动画： 精确控制动画的播放。
  - 时间轴拖动： 拖动时间轴来查看动画在不同时间点的状态，这对于定位问题非常有用。
  - 调整速度： 可以将动画播放速度放慢，以便观察细节。
  - 查看动画属性： 检查动画的名称、持续时间、速度曲线等。
- Firefox DevTools: 也有类似的“Animations”面板，功能大同小异。
检查“Computed”样式： 在“Elements”面板中选中你的动画元素，切换到“Computed”选项卡。这里会显示元素最终计算出来的所有CSS属性值。在动画播放时，你可以观察这些属性值是否如你所愿地发生变化。如果某个属性没有变化，或者变化不正确，那很可能就是CSS优先级或拼写错误导致的。
逐步简化问题： 当动画出现问题时，不要急于修改代码。最好的方法是逐步简化你的动画：
- 只动画一个属性： 比如只动画
```
opacity
```
  ，看看它是否正常工作。
- 减少关键帧： 先只保留
```
0%
```
  和
```
100%
```
  ，确保基本的起始和结束状态正确。
- 移除其他CSS： 暂时移除与动画无关的CSS，排除干扰。
- 创建一个最小可复现示例： 把问题代码复制到一个新的、空白的HTML文件里，只保留最少量的HTML和CSS，这样更容易发现问题。
临时修改
```
animation-duration
```
：将
```
animation-duration
```
设置一个很长的时间（比如
```
10s
```
），这样动画会播放得很慢，你可以更清晰地观察每个阶段的变化。
使用
```
border
```
或
background-color
辅助定位：如果元素的位置或大小动画不正确，可以给元素添加一个临时的
```
border
```
或鲜艳的
```
background-color
```
，让它更容易被看到。
检查浏览器兼容性： 虽然现代浏览器对CSS动画的支持已经很好了，但如果你需要支持一些老旧的浏览器，可能还需要考虑添加浏览器前缀（如
```
-webkit-
```
）。不过现在这已经很少见了。