css动画通过@keyframes定义关键帧并结合animation属性实现，animation-play-state用于控制动画的播放与暂停状态；1. 使用@keyframes命名动画并设定各阶段样式；2. 通过animation属性将动画应用到元素，设置时长、速度曲线、延迟、次数、方向及播放状态；3. 利用animation-play-state: paused实现鼠标悬停暂停动画；4. 选择动画方式时，简单高性能场景优先用css，复杂交互动态计算则选js；5. 复杂交互可通过animation-delay、animation-fill-mode、伪类、自定义属性及css变量结合js实现链式、序列、状态切换等效果；6. 性能优化需优先使用transform和opacity触发硬件加速，避免触发布局重排，合理使用will-change，减少动画元素数量，并通过开发者工具分析性能，确保动画流畅运行。
HTML动画主要通过CSS来实现，它提供了一套强大的属性来定义元素的运动和状态变化。
play-state
伪类，确切地说是
animation-play-state
CSS属性，它的核心作用是控制CSS动画的播放状态，可以将其设置为“运行”（
running
）或“暂停”（
paused
），这在实现用户交互式动画，比如鼠标悬停暂停动画或点击播放/暂停时非常有用。
解决方案
要在HTML元素上设置动画样式，我们主要依赖CSS的
@keyframes
规则和
animation
属性。
@keyframes
定义了动画的关键帧，即动画在不同时间点的样式；而
animation
属性则将这些关键帧应用到指定的元素上，并控制动画的播放方式。
首先，你需要定义一个
@keyframes
规则，给它一个名字，比如
myAnimation
：
立即学习“前端免费学习笔记（深入）”；
@keyframes myAnimation { 0% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(100px); opacity: 0.5; } 100% { transform: translateX(0); opacity: 1; } }
这段代码定义了一个名为
myAnimation
的动画，它会让元素在水平方向上移动并改变透明度。
接着，将这个动画应用到你想要动画的HTML元素上，比如一个
div
：
<div class="animated-box"></div>
然后在CSS中，使用
animation
属性来引用
@keyframes
并设置动画的各项参数：
.animated-box { width: 100px; height: 100px; background-color: dodgerblue; /* 动画名称 | 动画时长 | 动画速度曲线 | 动画延迟 | 动画播放次数 | 动画方向 | 动画填充模式 | 动画播放状态 */ animation: myAnimation 3s ease-in-out 1s infinite alternate running; }
这里，
animation
是一个复合属性，它包含了：
-
myAnimation
: 动画的名称，对应
@keyframes
的名称。
-
3s
: 动画持续时间。
-
ease-in-out
: 动画的速度曲线，让动画开始和结束时慢，中间快。
-
1s
: 动画延迟1秒开始。
-
infinite
: 动画无限次播放。
-
alternate
: 动画在每次循环中交替反向播放。
-
running
: 动画默认是运行状态。
animation-play-state
就是用来控制这个
running
或
paused
状态的。比如，当鼠标悬停在
.animated-box
上时，我们想让动画暂停：
.animated-box:hover { animation-play-state: paused; }
这样，鼠标移入时动画就会停住，移开时又会继续播放。这种细粒度的控制，让动画在用户体验上有了更多可能性。
CSS动画与JavaScript动画：我该如何选择最适合的动画实现方式？
这确实是个老生常谈的问题，但每次遇到具体需求，我还是会停下来琢磨一下。说实话，没有绝对的“最佳”，只有“更适合”的场景。
CSS动画，就像上面展示的，它最大的优势在于性能和声明性。浏览器在处理CSS动画时，通常会进行硬件加速，因为它知道动画的完整路径和时间线。这意味着在大多数情况下，CSS动画会更流畅，尤其是在处理简单的、基于属性（如
transform
,
opacity
,
color
等）的动画时。它的代码也更简洁，可读性高，你一眼就能看出动画的“意图”。比如，一个元素从A点移动到B点，或者渐显渐隐，用CSS写起来非常直观。我个人觉得，对于那些不需要复杂逻辑控制、不涉及大量计算的UI动效，比如按钮悬停效果、加载指示器、简单的页面切换动画，CSS动画是首选，它既高效又省心。
JavaScript动画，则提供了无与伦比的灵活性和控制力。当你需要动画与用户交互深度绑定、动画路径需要根据运行时数据动态计算、或者涉及复杂的物理效果、链式动画、SVG路径动画等，CSS动画就显得力不从心了。例如，一个元素需要跟随鼠标移动，或者动画的播放速度需要根据滚动条位置动态调整，再或者你需要在动画的特定时刻触发其他JS逻辑，这些都是JS动画的强项。它能让你在动画的每个帧上进行精确操作，甚至可以中断、反转动画。虽然JS动画可能会带来一些性能开销（因为它在主线程上运行，可能导致布局抖动或重绘），但现代浏览器和高性能的JS动画库（如GSAP, Anime.js, Framer Motion）已经很大程度上缓解了这些问题。
我的选择逻辑通常是：
- 简单、声明性、高性能？ 选CSS。
- 复杂、交互强、动态计算、需要回调？ 选JS。
- 两者结合？ 有时候，我会用CSS实现基础动画，然后用JS来控制动画的类名（如添加/移除
is-active
类），从而触发CSS动画的播放或暂停，这是一种很常见的混合模式，既利用了CSS的性能优势，又保留了JS的控制力。
除了简单的暂停/播放，我还能用CSS动画实现哪些复杂交互效果？
animation-play-state
确实很棒，但CSS动画的能力远不止于此。我们可以通过巧妙地组合其他CSS属性，实现相当复杂的交互效果，甚至模拟一些只有JS才能实现的功能。
- 链式动画与序列动画： 虽然CSS本身没有直接的“动画队列”概念，但我们可以通过
animation-delay
和精确计算每个动画的持续时间，来实现多个动画按顺序播放的效果。例如，一个元素先向右移动，然后渐隐，再放大。这需要多个
@keyframes
和多个
animation
规则，或者在一个
@keyframes
中定义多个阶段的复杂动画。配合
animation-fill-mode: forwards
，可以确保动画结束后元素停留在最终状态，为下一个动画做好准备。
- 基于状态的动画切换： 除了
:hover
，我们还可以利用
:focus
,
:active
,
:checked
等伪类，或者更强大的
[data-state]
自定义属性和JS来切换CSS类名，从而触发不同的动画。比如，一个点击后展开的菜单，可以用CSS动画来控制展开和收起的平滑过渡。
- 循环动画的交替方向：
animation-direction: alternate
这个属性就非常实用。它让动画在每次循环时反向播放，比如一个元素来回移动，或者颜色在两种状态间来回切换，无需编写额外的
@keyframes
。这让无限循环的动画看起来更自然、更有趣。
- 利用
animation-fill-mode
控制动画结束状态：
forwards
和
backwards
这两个值非常有意思。
forwards
让动画结束后元素保持最终帧的样式，这对于实现“一次性”动画，比如一个加载动画完成后停留在完成状态，或者一个入场动画结束后停留在页面上的某个位置，非常关键。
backwards
则让元素在动画延迟期间就应用动画第一帧的样式。
- 与CSS变量结合： 这是一个比较新的玩法。你可以通过JavaScript动态修改CSS变量的值，而这些变量又被用在
@keyframes
中，或者作为
animation
属性的一部分。这样，你就可以用JS来“微调”CSS动画，比如动态改变动画的速度、颜色、甚至路径，而无需重新计算整个动画。这在一定程度上弥补了CSS动画动态性不足的缺点。
- 视差滚动效果（部分实现）： 虽然复杂的视差通常需要JS监听滚动事件，但简单的视差效果可以通过CSS的
background-attachment: fixed
和
transform: translateZ()
（配合3D透视）来实现，或者利用CSS动画来响应滚动事件（虽然这不是CSS动画的本职工作，但有些库会通过JS来控制CSS变量或类名，间接实现）。
这些技巧的组合使用，让CSS动画在现代Web开发中依然扮演着不可或缺的角色，能够满足绝大多数的UI动效需求。
动画性能优化：在浏览器中如何确保CSS动画流畅不卡顿？
动画流畅性是用户体验的基石，卡顿的动画简直是噩梦。在浏览器中，要确保CSS动画流畅，我们得理解一些底层的渲染机制，并遵循一些最佳实践。
-
拥抱硬件加速属性：
transform
和
opacity
。 这是最重要的一个点。浏览器在渲染页面时，会将元素分成不同的层。像
transform
（包括
translate
,
scale
,
rotate
,
skew
）和
opacity
这类属性的动画，可以直接在GPU上进行合成（compositing），而不会触发布局（layout）或绘制（paint）操作。布局和绘制是CPU密集型操作，非常耗时，一旦动画触发了它们，页面就容易卡顿。所以，尽量用
transform
来移动、缩放、旋转元素，而不是改变
top
,
left
,
width
,
height
。
- 避免：
left: 0px
->
left: 100px
- 推荐：
transform: translateX(0px)
->
transform: translateX(100px)
- 避免：
-
谨慎使用
will-change
。
will-change
是一个性能优化属性，它告诉浏览器元素将要发生哪些变化，让浏览器提前做好优化准备，比如创建独立的合成层。但它不是万金油，滥用反而会消耗更多内存。只在动画开始前短暂地为即将动画的元素添加
will-change
属性（比如通过JS添加一个类，动画结束后移除），并且只针对关键的、复杂的动画属性。
-
避免强制同步布局（Layout Thrashing / Reflow）。 这是JavaScript操作DOM时常见的性能杀手。如果在循环中先读取（如
offsetHeight
,
getComputedStyle
），紧接着又写入（如
width = '100px'
），浏览器为了获取最新的布局信息，会强制进行同步布局计算，导致页面反复重排。虽然CSS动画本身不直接触发这个，但在JS控制CSS动画的场景下，尤其需要注意。
-
动画元素脱离文档流。 对于一些复杂的动画元素，如果它们在动画过程中会频繁改变位置或大小，考虑将其设置为
position: fixed
或
position: absolute
，使其脱离文档流。这样，它们的变化就不会影响到其他元素的布局，减少不必要的重排。
-
减少动画元素的数量和复杂度。 动画的元素越多，或者每个动画元素内部的DOM结构越复杂，浏览器需要处理的就越多。尝试简化动画目标元素的DOM结构，或者只对关键元素进行动画。
-
使用合适的
animation-timing-function
。 缓动函数不仅影响动画的视觉效果，也间接影响性能。
ease-in-out
等预设值通常是性能友好的。如果需要自定义，
cubic-bezier()
函数可以提供更精细的控制。
-
测试和分析。 最好的优化方法是使用浏览器开发者工具进行性能分析。Chrome DevTools的Performance面板可以清晰地看到动画过程中是否存在布局、绘制等耗时操作，从而找出性能瓶颈。
记住，流畅的动画是感知性能的重要组成部分。多花一点时间在优化上，绝对是值得的。
评论（已关闭）
评论已关闭