如何在CSS中使用动画制作图片缩放旋转_transform scale rotate @keyframes

使用@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 属性来调用刚才定义的动画：

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

Magic Write

Canva旗下AI文案生成器

75

查看详情

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中使用动画制作图片缩放旋转_transform scale rotate @keyframes的详细内容，更多请关注php中文网其它相关文章！