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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-28

浏览次数：次

返回列表

使用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 属性。这种方式无需J*aScript，性能良好，适用于页面加载或交互触发时的视觉增强。

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. 可选：控制动画触发时机

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

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

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>

然后通过 J*aScript 动态添加类：

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>