CSS动画如何实现图片放大淡入_transform scale opacity @keyframes结合

使用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;
/ 启用动画 /
animation: fadeInScale 0.6s ease-out forwards;
}

3. 可选：控制动画触发时机

如果希望动画在特定条件下触发（比如页面加载后或鼠标悬停），可以通过类名控制。

img {
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.3s;
}
img.animated {
animation: fadeInScale 0.6s ease-out forwards;
}
/ 鼠标悬停时触发放大淡入 /
img:hover {
transform: scale(1.1);
}

然后通过 JavaScript 动态添加类：

document.querySelector('img').classList.add('animated');

4. 完整示例代码

@@##@@

基本上就这些。利用 @keyframes 控制 opacity 和 transform: scale，再配合 animation 属性，就能流畅实现图片放大淡入效果。注意设置 transform-origin: center 可避免偏移，保持缩放居中。