答案：通过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 图片元素
首先准备一个图片标签，用于应用动画效果。
@@##@@
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. 应用动画到图片
将定义好的动画绑定到图片的类上，并设置动画时长和过渡效果。
.scale-img {
display: block;
width: 300px;
height: auto;
transition: transform 0.3s ease; /* 平滑过渡 */
}
/ 鼠标悬停时触发放大 /
.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);
}
.scale-img:hover {
transform: scale(1.1);
}
这种写法更简洁，适合轻量级交互；而 keyframes 更适合需要精确控制时间点的场景，比如循环播放或延迟启动。
基本上就这些。使用 transform: scale 结合 @keyframes 能高效实现图片缩放动画，无需 JavaScript，性能好且兼容性强。关键是合理设置缓动函数和动画时长，让视觉效果更自然流畅。
