CSS工具Animate.css如何实现图片旋转动画_Animate.css类与transform结合-css教程-PHP中文网

CSS工具Animate.css如何实现图片旋转动画_Animate.css类与transform结合

P粉602998670

发布： 2025-12-23 18:45:07

原创

566人浏览过

使用Animate.css的rotateIn类可实现图片旋转进入效果，结合自定义@keyframes与transform: rotate()能创建持续或无限旋转动画，通过添加animation-duration、transform-origin等属性控制细节，适用于加载图标或交互反馈场景。

css工具animate.css如何实现图片旋转动画_animate.css类与transform结合

Animate.css 是一个轻量级的 CSS 动画库，提供了大量预定义的动画类，可以快速为元素添加动画效果。如果想用 Animate.css 实现图片旋转动画，可以直接使用内置类，也可以结合 CSS 的 transform 属性来自定义更灵活的旋转效果。

使用 Animate.css 内置类实现旋转

Animate.css 提供了 rotateIn、rotateOut 等旋转动画类，适用于淡入旋转或消失旋转的场景。

例如：让图片在页面加载时从 0 度旋转放大进入

引入 Animate.css 文件（通过 CDN 或本地）
给 img 标签添加 animate__animated animate__rotateIn 类
可设置动画持续时间或延迟

示例代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
@@##@@

登录后复制

自定义旋转：Animate.css 类与 transform 结合

如果需要持续旋转（如加载图标）、特定角度旋转或无限循环，可以将 Animate.css 的触发机制与自定义 @keyframes 和 transform: rotate() 结合使用。

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

创客贴设计

创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！

213

查看详情

保留 Animate.css 的进入/离开动画结构
添加自定义 CSS 定义新的旋转 keyframes
通过类控制 transform 的旋转行为

示例：创建无限旋转动画

<style>
.custom-spin {
  animation: spin 1.5s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
</style>

@@##@@

登录后复制

也可以在鼠标悬停时结合 Animate.css 的触发类和 transform：

@@##@@

登录后复制

常见技巧与注意事项

Animate.css 默认只执行一次动画，若需重复可加 animate__repeat-2 或自定义 animation-iteration-count
使用 transform-origin 可调整旋转中心点，比如绕图片左上角转：transform-origin: top left;
移动端注意性能，避免多个高频率旋转同时运行
确保图片容器有足够空间，防止旋转时被裁剪

基本上就这些。通过组合 Animate.css 的便捷类和 transform 的精细控制，能轻松实现各种图片旋转动画效果，既省时又灵活。 CSS工具Animate.css如何实现图片旋转动画_Animate.css类与transform结合