CSS图片缩放旋转动画实现方法

本文详解了如何利用CSS的@keyframes与transform属性（scale()和rotate()）协同实现图片的流畅缩放旋转动画，涵盖关键帧定义、动画应用、悬停触发技巧及animation各参数的实用配置，同时提醒开发者注意transform统一声明以避免覆盖等易错细节——无需JavaScript，仅靠纯CSS即可打造专业级动态视觉效果。

要在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 属性要写在同一个声明中，否则会覆盖。

以上就是《CSS图片缩放旋转动画实现方法》的详细内容，更多关于的资料请关注golang学习网公众号！