哎呦喂，最近好多人问我怎么用 CSS 让图标转啊变啊。其实挺简单的，别看 CSS 看起来高大上， 一言难尽。 其实就是几行代码的事儿。我这儿就给你们分享一下我的经验，保证能让你快速上手。

啥是 CSS 动画？先知先觉得知道

还行。 CSS 动画就是让你的网页元素动起来。你可以让它旋转、缩放、移动、改变颜色……想怎么玩就怎么玩。这玩意儿特别有用，能让你的网页看起来更生动、更吸引人。但是要记住哦！不要过度使用动画啦，不然用户会觉得很烦。

@keyframes 是个好东西

@keyframes 就是定义动画的关键帧。你可以把它想象成一个电影的剧本，每一帧都描述了元素在特定时间点的状态。通过设置不同的关键帧和它们之间的过渡效果，就能实现各种各样的动画效果。

怎么实现图标旋转和缩放组合动画？一步一步来

要让图标既转又变大变小，我们需要用到 CSS 的 `transform` 和 `animation` 这两个属性。`transform` 可以用来旋转、 缩放、平移元素；而 `animation` 则可以用来控制动画的播放速度、循环次数等等，恳请大家...。

核心代码：把关键帧写对很重要

@keyframes spinAndScale {  /* 这个是核心! 定义了我们的动画序列 */   from { transform: scale rotate; }   50% { transform: scale rotate; }   to { transform: scale rotate; } } .icon { display: inline-block; width: 50px; height: 50px; animation: spinAndScale 3s ease-in-out infinite;  }

这段代码的意思是：先说说定义了一个名为 `spinAndScale` 的动画序列；然后将这个动画序列应用到 `.icon` 类名下的所有元素上。`animation` 的参数包括：动画名称 、持续时间 、缓动函数 以及循环方式 。

细节优化：让你的图标更酷

为了让你的图标看起来更专业、 更酷炫，可以对代码进行一些细节优化。

缓动函数 ：

`ease-in-out` 是一个常用的缓动函数， 它可以让动画的速度一开始比较慢，然后逐渐加快到中间速度最快，再说说再逐渐减慢到结束。还有其他很多缓动函数可以选择哦，我懂了。。

过渡效果 ：

`transition` 可以用来实现元素属性之间的平滑过渡效果。比方说你可以使用 `transition` 让图标在鼠标悬停时放大缩小，痛并快乐着。。

实际应用案例

一些小技巧和注意事项

• 兼容性问题：虽然现在大多数浏览器都支持 CSS 动画了 ，但还是要注意兼容性问题 。
• 性能问题：复杂的 CSS 动画可能会影响网页性能 ，所以要尽量避免过度使用 。
• 屏幕适配：要考虑不同屏幕尺寸下的显示效果 ，确保你的图标在各种设备上都能正常显示 。

怎么样？是不是很简单呢？只要掌握了 CSS 的 `transform` 和 `animation` 这两个属性 ， 简直了。 就能轻松实现各种各样的图标旋转和缩放组合动画了。赶紧去试试吧！如果你还有什么问题 ，欢迎在评论区留言哦！