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

Template CSS Slide-In: animações suaves da esquerda e direita com transform: translateX

📝 Uso

Este template é usado quando você deseja fazer um elemento deslizar da esquerda ou da direita.

📘 Explicação

Este código usa transform: translateX para deslizar um elemento da esquerda ou direita. A animação leva 4 segundos para ser concluída.

🔹 Código Parcial

<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>

💻 Código Completo

<div class="slide-in-left">
  Elemento deslizando da esquerda
</div>

<div class="slide-in-right">
  Elemento deslizando da direita
</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>
Copiado!

🚀 Usos práticos de animações de slide-in

Animações de slide-in usando transform: translateX são uma forma eficaz de adicionar elementos dinâmicos às páginas web. Essa técnica oferece mais do que apenas decoração; pode ser aplicada a elementos importantes da interface que capturam a atenção do usuário.

🎯 Casos de uso eficazes

O slide-in vindo da esquerda (.slide-in-left) é ideal para mostrar conteúdos novos ou notificações importantes. Já o slide-in vindo da direita (.slide-in-right) é frequentemente usado para menus laterais ou informações complementares. Reduzir a duração da animação de 4s para 2s, por exemplo, pode criar uma impressão mais ágil.

⚡ Otimização de desempenho

A propriedade transform aproveita a aceleração da GPU, tornando as animações mais suaves em comparação com aquelas que usam left ou margin. Adicionar will-change: transform; indica ao navegador para otimizar o render.

🔧 Exemplos de personalização

Se desejar adicionar um atraso na animação, você pode usar animation-delay: 0.5s;. Além disso, usar funções de easing personalizadas como cubic-bezier(0.68, -0.55, 0.265, 1.55) ao invés de ease-out pode criar movimentos mais únicos.

No design responsivo, é importante desabilitar animações em dispositivos móveis ou reduzir sua duração. Isso pode ser feito com consultas @media, ajudando a equilibrar usabilidade e desempenho.

Modelos Relacionados