HTML如何设置动画样式？play-state伪类的作用是什么？-html教程-PHP中文网

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如何设置动画样式？play-state伪类的作用是什么？

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）已经很大程度上缓解了这些问题。

Skybox AI

一键将涂鸦转为360°无缝环境贴图的AI神器

140

查看详情

我的选择逻辑通常是：

简单、声明性、高性能？ 选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面板可以清晰地看到动画过程中是否存在布局、绘制等耗时操作，从而找出性能瓶颈。