如何实现图片从左到右淡入CSS动画？图片始终可见问题排查

你的问题出在当前动画是修改容器宽度（滑动效果），且图片设置了min-w-[150px]导致不受容器宽度限制，始终可见。要实现基于opacity的从左到右淡入（非滑动），可以通过裁剪可见区域配合opacity过渡实现：

修改后的HTML代码 #

<div class="font-grotesk h-[500px] bg-gray-900">
  <div class="flex h-[100px]">
    <div class="second-logo max-w-[150px] bg-white overflow-hidden">
      <img src="https://placehold.co/90x30" class="w-full px-[14px] py-9" />
    </div>
  </div>
</div>

修改后的CSS代码 #

@tailwind base;
@tailwind components;
@tailwind utilities;

.second-logo img {
  /* 初始状态：完全透明+隐藏右侧区域 */
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  /* 应用动画，forwards保持最终状态 */
  animation: fadeInLeftToRight 3s forwards;
}

@keyframes fadeInLeftToRight {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

关键修改说明 #

• 移除图片的min-w-[150px]，改为w-full让图片宽度适应容器，避免溢出显示
• 给容器添加overflow:hidden，确保图片的裁剪效果生效
• 动画针对图片本身，通过clip-path控制可见区域从左到右展开，同时配合opacity从0到1过渡，实现淡入而非滑动的效果

内容的提问来源于stack exchange，提问作者OliverKhl