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 启用硬件加速，确保动画流畅。
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) 来自动添加这些前缀，这样可以减少手动编写代码的工作量。
如何使用 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;
来强制启用硬件加速。
总之，创建流畅的 CSS 动画需要仔细的规划和优化。理解动画的原理，选择合适的属性，并进行性能测试，才能创建出令人愉悦的用户体验。
