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-stateCSS属性，它的核心作用是控制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：
然后在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）已经很大程度上缓解了这些问题。
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
我的选择逻辑通常是：
- 简单、声明性、高性能？ 选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面板可以清晰地看到动画过程中是否存在布局、绘制等耗时操作，从而找出性能瓶颈。
记住，流畅的动画是感知性能的重要组成部分。多花一点时间在优化上，绝对是值得的。
