CSS动画如何实现图片缩放效果_transform scale @keyframes平滑过渡

答案：通过CSS的transform: scale与@keyframes结合可实现图片缩放动画。1. HTML中设置图片元素；2. 用@keyframes定义缩放关键帧，如scaleIn从1到1.2倍；3. 在:hover中应用动画，设时长、ease-in-out缓动及forwards保持终态；4. 也可用transition实现简易缩放，但@keyframes更适合复杂控制。合理配置时长与缓动函数可提升视觉流畅性。

在网页设计中，使用CSS动画实现图片的缩放效果是一种常见且视觉友好的交互方式。通过结合 transform: scale 与 @keyframes，可以创建平滑、自然的放大或缩小动画。以下是具体实现方法：

1. 基础结构：HTML 图片元素

首先准备一个图片标签，用于应用动画效果。

<img src="example.jpg" class="scale-img" alt="示例图片">

2. 使用 @keyframes 定义缩放动画

通过 @keyframes 创建关键帧动画，控制图片从原始尺寸到放大（或缩小）的过程。

@keyframes scaleIn {
  0% {
    transform: scale(1);     /* 初始大小 */
  }
  100% {
    transform: scale(1.2);   /* 放大至1.2倍 */
  }
}

你也可以定义缩小动画：

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

@keyframes scaleOut {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

3. 应用动画到图片

将定义好的动画绑定到图片的类上，并设置动画时长和过渡效果。

Kerqu.Ai

专为电商设计的一站式AI创作平台

202

查看详情

.scale-img {
  display: block;
  width: 300px;
  height: auto;
  transition: transform 0.3s ease; /* 平滑过渡 */
}
<p>/<em> 鼠标悬停时触发放大 </em>/
.scale-img:hover {
animation: scaleIn 0.6s ease-in-out forwards;
}

说明：

• ease-in-out 让动画开始和结束更柔和
• forwards 表示动画结束后保持最后一帧状态
• 也可用 transform 配合 transition 实现简单缩放，但 @keyframes 更适合复杂控制

4. 可选：配合 transition 实现更自然的交互

如果不使用 keyframes，仅通过 hover + transition 也能实现基础缩放：

.scale-img {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
<p>.scale-img:hover {
transform: scale(1.1);
}

这种写法更简洁，适合轻量级交互；而 keyframes 更适合需要精确控制时间点的场景，比如循环播放或延迟启动。

基本上就这些。使用 transform: scale 结合 @keyframes 能高效实现图片缩放动画，无需 JavaScript，性能好且兼容性强。关键是合理设置缓动函数和动画时长，让视觉效果更自然流畅。

以上就是CSS动画如何实现图片缩放效果_transform scale @keyframes平滑过渡的详细内容，更多请关注php中文网其它相关文章！