首页 > 文章 > 前端

CSS动画：图片放大淡入效果实现

时间：2026-01-19 22:43:44 260浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS动画实现图片放大淡入：transform与opacity结合使用》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

使用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动画如何实现图片放大淡入_transform scale opacity @keyframes结合

要实现图片放大并淡入的效果，可以使用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><img src="example.jpg" class="load" alt="示例图片"></p>

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

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS动画：图片放大淡入效果实现》文章吧，也可关注golang学习网公众号了解相关技术文章。

前往漫画官网入口并下载 ➜