使用@keyframes定义动画关键帧，通过transform的scale()和rotate()组合实现图片缩放旋转，再用animation属性应用到图片，可设置时长、缓动、循环等参数，配合: hover还可触发悬停动画，注意transform需统一声明避免覆盖。
要在CSS中实现图片的缩放和旋转动画，可以使用 transform 配合 @keyframes 来定义动画效果。通过 scale() 控制缩放，rotate() 控制旋转，两者可以组合使用，让图片产生流畅的动态效果。
1. 使用 @keyframes 定义动画关键帧
你需要先用 @keyframes 创建一个动画名称，并在其中设定不同阶段的 transform 状态：
@keyframes scaleRotate {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.5) rotate(180deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
这个动画从原始大小和角度开始，中间放大到1.5倍并旋转半圈，最后恢复原大小并完成整圈旋转。
2. 将动画应用到图片元素
接下来，在图片的选择器中使用 animation 属性来调用刚才定义的动画：
立即学习“前端免费学习笔记（深入）”；
img {
width: 200px;
height: auto;
animation: scaleRotate 3s ease-in-out infinite;
}
这里设置了动画时长为3秒，缓动函数为 ease-in-out，并循环播放（infinite）。
3. 可选：添加悬停触发动画
如果你希望动画只在鼠标悬停时触发，可以结合 :hover 使用：
img {
width: 200px;
transition: transform 0.5s ease;
}
img:hover {
animation: scaleRotate 2s forwards;
}
注意：如果同时使用 transition 和 animation，需注意优先级。通常建议在悬停场景下直接使用 animation 控制完整动画流程。
4. 动画属性说明
-
animation-name：指定 @keyframes 定义的动画名称，如
scaleRotate -
animation-duration：动画持续时间，如
3s -
animation-timing-function：速度曲线，如
ease、linear -
animation-iteration-count：播放次数，
infinite表示无限循环 -
animation-fill-mode：控制动画外状态，如保持结束态可用
forwards
基本上就这些。只要掌握 @keyframes 和 transform 的组合，就能轻松做出图片缩放加旋转的动画效果。不复杂但容易忽略细节，比如 transform 属性要写在同一个声明中，否则会覆盖。
