使用CSS的@keyframes、transform和opacity可实现图片缩放与透明度动画。1. 创建含图片的容器；2. 用@keyframes定义0%到100%的缩放与透明度变化；3. 将动画绑定至图片，设置时长1.5s、缓动ease-out并保持最终状态forwards；4. 可选:hover触发交互效果，提升视觉表现力。
想要在CSS中实现图片的缩放和透明度变化动画，可以通过 transform、opacity 和 @keyframes 结合使用来完成。这种方式无需JavaScript，仅用纯CSS就能创建流畅的动画效果。
1. 基础HTML结构
先准备一个包含图片的容器，便于绑定动画样式：
<div class="animated-image"><img src="example.jpg" alt="示例图片">
</div>
2. 使用 @keyframes 定义动画关键帧
通过 @keyframes 设置动画在不同时间点的状态。比如从缩小且半透明开始，到正常大小和完全不透明结束：
@keyframes scaleAndFade {0% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
3. 应用动画到图片
将定义好的动画绑定到图片或其容器上，并设置动画时长、缓动函数和播放次数：
立即学习“前端免费学习笔记（深入）”；
.animated-image img {
width: 300px;
height: auto;
transition: all 0.3s ease;
}
.animated-image img {
animation: scaleAndFade 1.5s ease-out forwards;
}
- scale(0.8) 表示初始缩小为80%
- opacity: 0.5 初始半透明
- ease-out 让动画结尾更平滑
- forwards 确保动画结束后保持最终状态
4. 可选：悬停触发动画
如果希望鼠标悬停时才触发动画，可以使用 :hover：
.animated-image img {opacity: 0.5;
transform: scale(0.8);
transition: transform 0.6s ease, opacity 0.6s ease;
}
.animated-image:hover img {
transform: scale(1);
opacity: 1;
}
这种方式更适合交互式效果，比如图库或按钮悬停。
基本上就这些。结合 transform、opacity 和 @keyframes，你可以灵活控制图片的入场、强调或交互动画，视觉表现力强且性能良好。
