当前位置：首页 > 文章列表 > 文章 > 前端 > CSS动画制作教程：keyframes与transform应用

CSS动画制作教程：keyframes与transform应用

2026-03-10 20:58:34 0浏览收藏

本文深入浅出地讲解了如何仅用纯CSS（无需JavaScript）打造流畅美观的加载动画，核心聚焦于@keyframes与transform的协同运用：通过@keyframes定义从0%到100%的关键帧变化流程，再结合transform的rotate、scale、translate等函数实现旋转加载圈、呼吸式脉冲等实用效果，并强调infinite循环、缓动函数（如linear或ease-in-out）等关键细节，让网页加载状态既专业又富有表现力——简单几行代码，就能显著提升用户体验的视觉流畅感与交互质感。

如何使用CSS制作简单加载动画_keyframes与transform结合

想让网页看起来更流畅，加载动画是个不错的选择。用CSS的 @keyframes 和 transform 能轻松做出简洁又好看的加载效果，不需要JavaScript也能实现。

1. 理解关键帧 @keyframes

@keyframes 是定义动画过程的核心规则。你可以指定某个时间段内元素的样式变化。

比如做一个旋转动画，可以这样写：

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

这段代码表示元素从0度转到360度，形成一圈完整的旋转。

2. 使用 transform 实现动态效果

transform 可以对元素进行旋转、缩放、平移等操作。结合 keyframes，能让动画更生动。

常见用法包括：

rotate()：让元素绕中心点旋转
scale()：改变元素大小，适合做呼吸效果
translate()：移动位置，可模拟跳动或滑入

3. 制作一个简单的旋转加载器

下面是一个实用例子：创建一个不断旋转的圆圈加载动画。

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

这个效果利用了边框颜色差异，只让顶部有颜色，配合旋转就形成了“进度条”式的加载动画。

4. 添加呼吸式缩放动画

如果你想做一个像心跳一样的加载提示，可以用 scale 配合 keyframes。

.pulse {
  width: 20px;
  height: 20px;
  background: #e74c3c;
  border-radius: 50%;
  animation: breathe 1.5s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
}

这个动画会让小圆点反复放大缩小，产生“呼吸”感，适合用于轻量级状态提示。

基本上就这些。只要掌握 @keyframes 定义动画流程，再用 transform 控制形变，就能做出各种简单又实用的加载效果。不复杂但容易忽略细节，比如记得加 infinite 让动画持续播放，还有选择合适的缓动函数（如 linear、ease-in-out）来控制节奏。

到这里，我们也就讲完了《CSS动画制作教程：keyframes与transform应用》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！