EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Transições e Animações Tailwind CSS: Propriedades transition e Presets animate

Propriedades de Transição (transition-*)

As classes de transição controlam efeitos de animação suave quando os estados dos elementos mudam.

Classe Valor CSS Descrição
transition transition-property: color, background-color, border-color, ... Transições de propriedades comuns
transition-all transition-property: all Transições de todas as propriedades
transition-colors transition-property: color, background-color, border-color, ... Transições apenas de cores
transition-opacity transition-property: opacity Transições apenas de opacidade
transition-shadow transition-property: box-shadow Transições apenas de sombra
transition-transform transition-property: transform Transições apenas de transformação
transition-none transition-property: none Sem transição

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Propriedades de Transição</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Transições de cor com transition-colors -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Transições de Cor com transition-colors</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-700 transition-colors duration-300">
          Transição de cor
        </button>
        <button class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-700 hover:text-yellow-200 transition-colors duration-300">
          Transição de fundo + texto
        </button>
        <button class="px-6 py-3 border-2 border-purple-500 text-purple-500 rounded-lg hover:border-purple-700 hover:text-purple-700 transition-colors duration-300">
          Transição de borda
        </button>
      </div>
    </div>

    <!-- Transições de opacidade com transition-opacity -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Transições de Opacidade com transition-opacity</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-blue-500 rounded-lg hover:opacity-50 transition-opacity duration-300 flex items-center justify-center text-white text-xs">
          Hover para semi-transparente
        </div>
        <div class="w-24 h-24 bg-green-500 rounded-lg opacity-50 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-xs">
          Hover para totalmente opaco
        </div>
        <div class="w-24 h-24 bg-purple-500 rounded-lg hover:opacity-0 transition-opacity duration-500 flex items-center justify-center text-white text-xs">
          Hover para desaparecer
        </div>
      </div>
    </div>

    <!-- Transições de sombra com transition-shadow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Transições de Sombra com transition-shadow</h3>
      <div class="flex gap-4">
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-lg transition-shadow duration-300 flex items-center justify-center text-sm">
          Sombra pequena
        </div>
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-xl transition-shadow duration-300 flex items-center justify-center text-sm">
          Sombra grande
        </div>
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-2xl hover:shadow-blue-500/50 transition-shadow duration-300 flex items-center justify-center text-sm">
          Sombra colorida
        </div>
      </div>
    </div>

    <!-- Transições de transformação com transition-transform -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Transições de Transformação com transition-transform</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-orange-500 rounded-lg hover:scale-110 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          Aumentar
        </div>
        <div class="w-24 h-24 bg-red-500 rounded-lg hover:rotate-12 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          Rotacionar
        </div>
        <div class="w-24 h-24 bg-teal-500 rounded-lg hover:-translate-y-2 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          Mover para cima
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever transition: color 0.3s ease, background-color 0.3s ease e propriedades semelhantes, enquanto o Tailwind usa nomes de classes como transition-colors duration-300 para declaração direta.

💡 Dica: A classe transition faz transições de propriedades comuns por padrão, incluindo color, background-color, border-color, opacity, box-shadow e transform.

Duração da Transição (duration-*)

As classes duration-* controlam a duração das animações de transição.

Classe Valor CSS Descrição
duration-75 transition-duration: 75ms Extremamente rápido
duration-100 transition-duration: 100ms Muito rápido
duration-150 transition-duration: 150ms Rápido
duration-200 transition-duration: 200ms Bastante rápido
duration-300 transition-duration: 300ms Normal (padrão)
duration-500 transition-duration: 500ms Bastante lento
duration-700 transition-duration: 700ms Lento
duration-1000 transition-duration: 1000ms Muito lento

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Duração de Transição</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">Comparando Diferentes Durações de Transição</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-75</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-blue-500 rounded-lg hover:w-full transition-all duration-75"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-150</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-green-500 rounded-lg hover:w-full transition-all duration-150"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-300</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-yellow-500 rounded-lg hover:w-full transition-all duration-300"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-500</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-orange-500 rounded-lg hover:w-full transition-all duration-500"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-1000</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-red-500 rounded-lg hover:w-full transition-all duration-1000"></div>
          </div>
        </div>
      </div>
      <p class="text-sm text-gray-500 mt-4">Passe o mouse sobre os blocos de cores para ver diferentes durações de transição</p>
    </div>
  </div>
</body>
</html>
▶ Experimente
💡 Dica: Elementos interativos (botões, links) geralmente usam duration-150 ou duration-200, enquanto animações maiores usam duration-300 ou duration-500.

Funções de Suavização (ease-*)

As classes ease-* controlam a curva de aceleração das animações de transição.

Classe Valor CSS Descrição
ease-linear transition-timing-function: linear Velocidade constante
ease-in transition-timing-function: cubic-bezier(0.4, 0, 1, 1) Início lento
ease-out transition-timing-function: cubic-bezier(0, 0, 0.2, 1) Fim lento
ease-in-out transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) Início e fim lentos

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Funções de Suavização</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">Comparando Diferentes Funções de Suavização</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-linear</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-blue-500 rounded-lg hover:w-full transition-all duration-1000 ease-linear"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-in</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-green-500 rounded-lg hover:w-full transition-all duration-1000 ease-in"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-out</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-yellow-500 rounded-lg hover:w-full transition-all duration-1000 ease-out"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-in-out</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-purple-500 rounded-lg hover:w-full transition-all duration-1000 ease-in-out"></div>
          </div>
        </div>
      </div>
      <p class="text-sm text-gray-500 mt-4">Passe o mouse sobre os blocos de cores para ver diferentes efeitos de suavização</p>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), enquanto o Tailwind usa o nome da classe ease-in-out para declaração direta.

Atraso da Transição (delay-*)

As classes delay-* controlam o atraso antes do início de uma animação de transição.

Classe Valor CSS Descrição
delay-0 transition-delay: 0ms Sem atraso
delay-75 transition-delay: 75ms Atraso de 75ms
delay-100 transition-delay: 100ms Atraso de 100ms
delay-150 transition-delay: 150ms Atraso de 150ms
delay-300 transition-delay: 300ms Atraso de 300ms
delay-500 transition-delay: 500ms Atraso de 500ms
delay-700 transition-delay: 700ms Atraso de 700ms
delay-1000 transition-delay: 1000ms Atraso de 1000ms

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Atraso de Transição</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">Efeito de Animación Escalonada (usando delay)</h3>
      <div class="flex gap-4 justify-center">
        <div class="w-16 h-16 bg-blue-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-0"></div>
        <div class="w-16 h-16 bg-green-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-75"></div>
        <div class="w-16 h-16 bg-yellow-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-150"></div>
        <div class="w-16 h-16 bg-orange-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-300"></div>
        <div class="w-16 h-16 bg-red-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-500"></div>
      </div>
      <p class="text-sm text-gray-500 mt-4 text-center">Passe o mouse para ver o efeito de animação escalonada</p>
    </div>

    <!-- Animação de entrada escalonada -->
    <div class="bg-white rounded-lg shadow p-6 mt-6">
      <h3 class="font-semibold mb-6">Animação de Entrada Escalonada</h3>
      <div class="space-y-3">
        <div class="p-4 bg-blue-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0s_forwards]">
          Item 1 (atraso de 0ms)
        </div>
        <div class="p-4 bg-green-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.1s_forwards]">
          Item 2 (atraso de 100ms)
        </div>
        <div class="p-4 bg-yellow-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.2s_forwards]">
          Item 3 (atraso de 200ms)
        </div>
        <div class="p-4 bg-orange-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.3s_forwards]">
          Item 4 (atraso de 300ms)
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente
💡 Dica: Use delay-* com diferentes valores de atraso para criar efeitos de animação escalonada, fazendo com que múltiplos elementos apareçam um após o outro.

Animações Predefinidas (animate-*)

O Tailwind fornece 4 classes de animação predefinidas.

Classe Valor CSS Descrição
animate-spin Animação de rotação Adequado para ícones de carregamento
animate-ping Animação de ping Adequado para pulsos de notificação
animate-pulse Animação de pulso Adequado para telas de esqueleto
animate-bounce Animação de quique Adequado para indicadores de seta

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Animações Predefinidas</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Rotação animate-spin -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Animação de Rotação animate-spin</h3>
      <div class="flex gap-8 items-center">
        <div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        <div class="w-12 h-12 border-4 border-green-500 border-t-transparent border-r-transparent rounded-full animate-spin"></div>
        <svg class="w-12 h-12 text-purple-500 animate-spin" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
      </div>
    </div>

    <!-- Ping animate-ping -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Animação de Ping animate-ping</h3>
      <div class="flex gap-8 items-center">
        <div class="relative">
          <div class="w-4 h-4 bg-blue-500 rounded-full"></div>
          <div class="absolute inset-0 w-4 h-4 bg-blue-500 rounded-full animate-ping"></div>
        </div>
        <div class="relative">
          <div class="w-8 h-8 bg-green-500 rounded-full"></div>
          <div class="absolute inset-0 w-8 h-8 bg-green-500 rounded-full animate-ping opacity-75"></div>
        </div>
        <button class="relative px-6 py-3 bg-red-500 text-white rounded-lg">
          Notificação
          <span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full animate-ping"></span>
          <span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full"></span>
        </button>
      </div>
    </div>

    <!-- Pulso animate-pulse -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Animação de Pulso animate-pulse</h3>
      <div class="flex gap-8 items-center">
        <div class="w-16 h-16 bg-blue-200 rounded-lg animate-pulse"></div>
        <div class="w-16 h-16 bg-green-200 rounded-lg animate-pulse"></div>
        <div class="w-16 h-16 bg-purple-200 rounded-lg animate-pulse"></div>
      </div>
      <!-- Exemplo de tela de esqueleto -->
      <div class="mt-6 p-4 bg-gray-50 rounded-lg">
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-gray-200 rounded-full animate-pulse"></div>
          <div class="flex-1 space-y-2">
            <div class="h-4 bg-gray-200 rounded animate-pulse w-3/4"></div>
            <div class="h-3 bg-gray-200 rounded animate-pulse w-1/2"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Quique animate-bounce -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Animação de Quique animate-bounce</h3>
      <div class="flex gap-8 items-center justify-center">
        <svg class="w-8 h-8 text-blue-500 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
        </svg>
        <div class="w-8 h-8 bg-green-500 rounded-full animate-bounce"></div>
        <div class="w-8 h-8 bg-orange-500 rounded-lg animate-bounce"></div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever @keyframes e propriedades animation, enquanto o Tailwind usa nomes de classes como animate-spin e animate-pulse para aplicar animações predefinidas diretamente.

💡 Dica: animate-ping é normalmente usado com posicionamento absoluto para criar efeitos de notificação pulsante. animate-pulse é ótimo para efeitos de carregamento em telas de esqueleto.

Keyframes Personalizados

Você pode definir animações personalizadas usando a configuração do Tailwind ou a diretiva @theme.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Keyframes Personalizados</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @theme {
      --animate-fade-in: fadeIn 0.5s ease-out;
      --animate-fade-in-up: fadeInUp 0.5s ease-out;
      --animate-slide-in-left: slideInLeft 0.5s ease-out;
      --animate-scale-in: scaleIn 0.3s ease-out;
      --animate-shake: shake 0.5s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
      20%, 40%, 60%, 80% { transform: translateX(4px); }
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Animações personalizadas -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Animações Personalizadas</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="p-4 bg-blue-50 rounded-lg text-center animate-fade-in">
          <div class="text-2xl mb-2">fadeIn</div>
          <div class="text-sm text-gray-600">Aparecer</div>
        </div>
        <div class="p-4 bg-green-50 rounded-lg text-center animate-fade-in-up">
          <div class="text-2xl mb-2">fadeInUp</div>
          <div class="text-sm text-gray-600">Deslizar para cima aparecendo</div>
        </div>
        <div class="p-4 bg-yellow-50 rounded-lg text-center animate-slide-in-left">
          <div class="text-2xl mb-2">slideInLeft</div>
          <div class="text-sm text-gray-600">Deslizar da esquerda</div>
        </div>
        <div class="p-4 bg-purple-50 rounded-lg text-center animate-scale-in">
          <div class="text-2xl mb-2">scaleIn</div>
          <div class="text-sm text-gray-600">Aparecer aumentando</div>
        </div>
      </div>
    </div>

    <!-- Animação de tremida -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Animação shake</h3>
      <div class="flex gap-4">
        <input type="text" placeholder="Campo de entrada"
               class="flex-1 p-3 border border-red-300 rounded-lg animate-shake focus:outline-none focus:border-red-500">
        <button class="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600">
          Enviar
        </button>
      </div>
      <p class="text-sm text-red-500 mt-2">Use a animação shake para indicar erros de entrada</p>
    </div>

    <!-- Controle de animação -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Controle de Animação</h3>
      <div class="flex gap-4 flex-wrap">
        <div class="w-16 h-16 bg-blue-500 rounded-lg animate-spin [animation-play-state:paused] hover:[animation-play-state:running] flex items-center justify-center text-white text-xs cursor-pointer">
          Passe o mouse para tocar
        </div>
        <div class="w-16 h-16 bg-green-500 rounded-lg animate-bounce [animation-iteration-count:3] flex items-center justify-center text-white text-xs">
          Quicar 3 vezes
        </div>
        <div class="w-16 h-16 bg-purple-500 rounded-lg animate-pulse [animation-direction:alternate] flex items-center justify-center text-white text-xs">
          Direção alternada
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer definir @keyframes em um arquivo CSS e escrever propriedades animation, enquanto a diretiva @theme do Tailwind v4 permite definir variáveis de animação diretamente, usadas com classes animate-*.

⚠️ Nota: No modo CDN do Tailwind, a diretiva @theme deve ser colocada dentro de uma tag <style type="text/tailwindcss"> para funcionar.

Exemplo Abrangente

Combinando transições e animações para criar um exemplo completo de efeito interativo.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo Abrangente de Transições e Animações</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @theme {
      --animate-fade-in-up: fadeInUp 0.6s ease-out forwards;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Cards interativos -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=20" alt="Card"
               class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">Ver Detalhes</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">Card com Efeito Hover</h4>
          <p class="text-gray-600 text-sm">Zoom da imagem, revelação da sobreposição, deslize do texto</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=21" alt="Card"
               class="w-full h-full object-cover transition-transform duration-500 group-hover:rotate-3">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">Ver Detalhes</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">Card com Efeito de Rotação</h4>
          <p class="text-gray-600 text-sm">Rotação da imagem, revelação da sobreposição, deslize do texto</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=22" alt="Card"
               class="w-full h-full object-cover transition-all duration-500 group-hover:brightness-125">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">Ver Detalhes</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">Card com Efeito de Brilho</h4>
          <p class="text-gray-600 text-sm">Aumento de brilho, revelação da sobreposição, deslize do texto</p>
        </div>
      </div>
    </div>

    <!-- Estados de carregamento -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Animações de Estado de Carregamento</h3>
      <div class="flex gap-8 items-center">
        <div class="flex flex-col items-center gap-2">
          <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
          <span class="text-sm text-gray-600">Carregando</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="flex gap-1">
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s;"></div>
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.1s;"></div>
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s;"></div>
          </div>
          <span class="text-sm text-gray-600">Carregamento quicando</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="flex gap-1">
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0s;"></div>
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0.15s;"></div>
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0.3s;"></div>
          </div>
          <span class="text-sm text-gray-600">Carregamento pulsante</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

❓ Perguntas Frequentes

P: Qual a diferença entre transition e transition-all? R: transition faz transições de propriedades comuns (cores, fundos, bordas, sombras, transformações, etc.), enquanto transition-all faz transições de todas as propriedades animáveis. transition é geralmente recomendado para melhor desempenho.

P: Como faço para uma animação tocar apenas uma vez? R: Use [animation-iteration-count:1] ou defina animation-fill-mode: forwards ao definir a animação em @theme para preservar o estado final.

P: E se minha animação de transição não estiver funcionando? R: Verifique se você adicionou uma classe transition, confirme que a propriedade é transicionável (display não é), e certifique-se de que duration não seja 0.

P: Como crio animações escalonadas? R: Use classes delay-* com diferentes valores de atraso para múltiplos elementos. Por exemplo, 5 elementos podem usar delay-0, delay-75, delay-150, delay-300 e delay-500 respectivamente.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie um componente de botão que usa transition-colors duration-200 para transições suaves de cor de fundo e texto no hover

  2. ⭐⭐ Crie um indicador de carregamento que usa animate-spin para um círculo giratório combinado com animate-pulse para um efeito pulsante

  3. ⭐⭐⭐ Crie uma galeria de imagens que usa transition-all duration-300 e group-hover: para alcançar um efeito de animação combinado de zoom da imagem, revelação da sobreposição e deslize do título no hover

100%