css图标旋转和缩放同时动画如何实现_使用Font Awesome和Animate.css组合-css教程-PHP中文网

css图标旋转和缩放同时动画如何实现_使用Font Awesome和Animate.css组合

P粉602998670

发布： 2025-12-13 09:31:01

原创

572人浏览过

答案：结合Animate.css或自定义CSS可实现Font Awesome图标旋转与缩放动画。首先引入Font Awesome和Animate.css资源，随后通过组合animate__rotateIn与animate__pulse等类实现同时动画，或使用animate__infinite使动画循环；推荐自定义CSS关键帧动画rotateAndScale，精准控制transform的rotate和scale属性，实现更流畅、稳定的动态效果，同时注意避免动画冲突及移动端性能问题。

css图标旋转和缩放同时动画如何实现_使用font awesome和animate.css组合

要在网页中实现 Font Awesome 图标的旋转和缩放同时动画，可以结合 Animate.css 提供的动画效果轻松完成。Animate.css 是一个预设 CSS 动画库，支持多种进入、退出和循环动画，非常适合与图标字体搭配使用。

1. 引入必要的资源

首先在页面中引入 Font Awesome 和 Animate.css 的 CDN 链接：

cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

确保网络可访问这些资源，这样图标和动画样式才能正常加载。

2. 使用 Animate.css 组合动画类

Animate.css 不直接支持多个动画叠加，但可以通过 JavaScript 或手动组合关键帧实现旋转和缩放同时进行。最简单的方式是选择两个兼容的动画类并同时应用。

立即学习“前端免费学习笔记（深入）”；

例如，让一个 Font Awesome 图标同时旋转（rotate）和放大（bounce / pulse）：

这里 animate__rotateIn 实现旋转进入，animate__pulse 实现周期性缩放脉冲。两者会同时作用于元素。

若想持续循环动画，添加 animate__infinite 类并设置持续时间：

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

185

查看详情

3. 自定义组合动画（推荐更灵活方式）

如果预设动画不满足需求，可以自定义 CSS 动画，同时控制旋转和缩放：

CSS:

.rotate-scale {
  animation: rotateAndScale 2s infinite ease-in-out;
}

@keyframes rotateAndScale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.5);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

HTML:

这个方法完全可控，能精准调节旋转角度、缩放比例和时间曲线。