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

CSS滑入模板：使用transform: translateX实现左右平滑动画效果

📝 用途

此模板用于将元素从左或右滑入。

📘 解释

此代码使用 transform: translateX 来实现从左或右滑入的动画。动画将在 4 秒内完成。

🔹 部分代码

<style>
  .slide-in-left {
    transform: translateX(-100%);
    animation: slideInLeft 4s ease-out forwards;
  }

  .slide-in-right {
    transform: translateX(100%);
    animation: slideInRight 4s ease-out forwards;
  }

  @keyframes slideInLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }
</style>

💻 完整代码

<div class="slide-in-left">
  从左边滑入的元素
</div>

<div class="slide-in-right">
  从右边滑入的元素
</div>

<style>
  .slide-in-left {
    transform: translateX(-100%);
    animation: slideInLeft 4s ease-out forwards;
  }

  .slide-in-right {
    transform: translateX(100%);
    animation: slideInRight 4s ease-out forwards;
  }

  @keyframes slideInLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }
</style>
已复制！

🚀 滑动动画的实用方法

使用 transform: translateX 实现的滑动动画，是为网页添加动态元素的有效方式。这种技术不仅仅是装饰，还可以应用于吸引用户注意的重要 UI 元素。

🎯 有效的使用场景

从左侧滑入（.slide-in-left）适合用于显示新内容或重要通知。相反，从右侧滑入（.slide-in-right）通常用于侧边栏菜单或补充信息。将动画时间从 4s 缩短到 2s 可以带来更快速的感觉。

⚡ 性能优化

transform 属性支持 GPU 加速，使动画比使用 left 或 margin 更加流畅。添加 will-change: transform; 可以提示浏览器进行渲染优化。

🔧 自定义示例

如果想给动画添加延迟，可以使用 animation-delay: 0.5s;。另外，使用自定义缓动函数如 cubic-bezier(0.68, -0.55, 0.265, 1.55) 替代 ease-out 可以实现更独特的动画效果。

在响应式设计中，建议在移动设备上禁用动画或缩短动画时间。这可以通过 @media 查询实现，有助于平衡用户体验和性能。

相关模板