当前位置：首页 > 文章列表 > 文章 > 前端 > CSS关键帧动画教程详解

CSS关键帧动画教程详解

2025-09-25 23:24:58 0浏览收藏

如何让动画循环播放？

使用 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; 来强制启用硬件加速。