🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS淡入效果模板：结合@keyframes与opacity实现柔和呈现

📝 用途

此模板用于为元素添加渐显效果。

📘 解释

此代码使用 @keyframes 定义渐显动画，通过将 opacity 从 0 改变为 1，使元素平滑地显现出来。

🔹 部分代码

<style>
  .fade-in-element {
    opacity: 0;
    animation: fadeIn 5s ease-in-out forwards; /* 动画时长改为5秒 */
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>

💻 完整代码

<div class="fade-in-element">
  这是一个具有渐显效果的元素。
</div>

<style>
  .fade-in-element {
    opacity: 0;
    animation: fadeIn 5s ease-in-out forwards; /* 动画时长改为5秒 */
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>
已复制！

✨ 渐显动画的实用技巧

使用 @keyframes 和 opacity 实现的渐显（fade-in）效果是一种非常有效的方式，可以吸引用户的注意力。合理使用可以显著提升页面加载时的用户体验。

⏱️ 动画优化技巧

将默认的 5 秒动画缩短为 1s–2s 更加自然。通过添加 animation-delay，可以实现多个元素按顺序依次显示。例如，设置 animation-delay: 0.5s 表示动画将延迟 0.5 秒开始。

🎨 设计变化

除了简单的淡入效果，还可以结合 transform: translateY(20px) 实现从上方滑入的视觉效果。此外，将 ease-in-out 替换为 cubic-bezier(0.68, -0.55, 0.265, 1.55) 等自定义缓动函数，可以呈现更具个性的动画效果。

⚠️ 无障碍性考虑

部分用户可能对动画敏感，容易产生眩晕或不适，建议使用 @media (prefers-reduced-motion: reduce) 提供关闭动画的选项。同时，不应仅依赖动画来呈现重要内容。

渐显效果可以增强用户体验，但使用过多可能令人分心。建议仅应用于页面中的关键元素或希望吸引用户注意的特定位置。

相关模板