CSS动画如何实现图片放大淡入_transform scale opacity @keyframes结合-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-28 19:01:46

原创

875人浏览过

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

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

立即学习“前端免费学习笔记（深入）”；

Skybox AI

一键将涂鸦转为360°无缝环境贴图的AI神器

140

查看详情

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动画如何实现图片放大淡入_transform scale opacity @keyframes结合的详细内容，更多请关注php中文网其它相关文章！