使用css @keyframes定义从透明缩小到完全显示的动画，通过animation绑定至图片实现放大淡入；1. 设置@keyframes fadeinscale使opacity从0到1、scale从0.8到1；2. 将动画应用到img元素并设定时长0.6s、缓动ease-out及forwards保持最终状态；3. 可通过类名控制触发时机，如加载或悬停时添加animated类；4. 完整示例包含样式定义与带load类的img标签，确保transform-origin:center避免偏移。
要实现图片放大并淡入的效果，可以使用CSS的 @keyframes 结合 transform: scale 和 opacity 属性。这种方式无需JavaScript，性能良好，适用于页面加载或交互触发时的视觉增强。
1. 使用 @keyframes 定义动画关键帧
通过 @keyframes 设置动画从开始到结束的状态变化。这里让图片从缩小透明状态逐渐变为正常大小且完全不透明。
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
2. 应用动画到图片元素
将定义好的动画绑定到目标图片上，设置动画时长、缓动函数和播放次数。
img {
display: block;
margin: 50px auto;
width: 200px;
height: auto;
<p>/<em> 启用动画 </em>/
animation: fadeInScale 0.6s ease-out forwards;
}</p>3. 可选：控制动画触发时机
如果希望动画在特定条件下触发（比如页面加载后或鼠标悬停），可以通过类名控制。
立即学习“前端免费学习笔记（深入）”；
img {
opacity: 0;
transform: scale(0.8);
transition: transform 0.3s;
}
<p>img.animated {
animation: fadeInScale 0.6s ease-out forwards;
}</p><p>/<em> 鼠标悬停时触发放大淡入 </em>/
img:hover {
transform: scale(1.1);
}</p>然后通过 JavaScript 动态添加类：
document.querySelector('img').classList.add('animated');
4. 完整示例代码
<style>
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
img {
display: block;
width: 200px;
margin: 50px auto;
opacity: 0;
transform-origin: center;
}
img.load {
animation: fadeInScale 0.6s ease-out forwards;
}
</style>
<p>@@##@@</p>基本上就这些。利用 @keyframes 控制 opacity 和 transform: scale，再配合 animation 属性，就能流畅实现图片放大淡入效果。注意设置 transform-origin: center 可避免偏移，保持缩放居中。
