Qual a diferença entre transição e animação no CSS
Bem-vindo(a) ao post no blog.
🧠 Diferença entre Transição e Animação: Tipo Quando Usar Característica
Transition → Quando um estado muda (ex: hover, click) → Depende de um evento do usuário
Animation → Quando algo deve acontecer automaticamente (ex: banner, loader) Roda sozinha através dos keyframes
⚙️ Propriedade transition
A propriedade transition define como e quanto tempo uma mudança suave vai durar entre os estados CSS.
Exemplo básico:
button {
background: #0077ff;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
button:hover {
background: #005fd4;
transform: scale(1.05);
}
💡 Explicando:
● transition: propriedade duração tipo
● ease adiciona uma curva suave (você também pode usar linear, ease-in, ease-out, etc.)
💬 Você pode usar transition: all:
.box {
transition: all 0.4s ease-in-out;
}
👉 Assim, qualquer mudança (cor, posição, sombra) é suavizada automaticamente.
🎚️ Propriedade transform
Com transform, é possível mover, girar, escalar ou inclinar elementos. Efeito Exemplo Descrição
Mover → translate(x, y) → Move o elemento
Escalar → scale(x, y) → Aumenta ou reduz
Girar → rotate(ângulo) → Gira o elemento
Inclinar → skew(x, y) → Inclina nos eixos
Combinar → translate + rotate + scale → Combina efeitos
Exemplo:
.box:hover {
transform: translateY(-10px) rotate(5deg);
}
💥 Um pequeno movimento e rotação que dá “vida” ao layout.
🔁 Introdução às Animações (@keyframes)
As animações CSS permitem definir uma sequência de mudanças ao longo do tempo.
Estrutura:
@keyframes nome-da-animacao {
0% { /* estado inicial */ }
50% { /* meio do caminho */ }
100% { /* estado final */ }
}
Depois, você aplica com a propriedade animation:
.elemento {
animation: nome-da-animacao duração tipo repetição;
}
Exemplo básico — animação de pulso
@keyframes pulsar {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
button {
background: #0077ff;
border: none;
border-radius: 10px;
color: white;
padding: 14px 24px;
font-size: 16px;
cursor: pointer;
animation: pulsar 2s infinite ease-in-out;
}
💡 O botão cresce e volta ao normal suavemente, infinitamente.
🧩 Controlando o Ciclo das Animações: Propriedade Função
animation-name → Nome da animação (referência ao @keyframes)
animation-duration → Duração total
animation-timing-function → Tipo de transição (ease, linear, ease-in, etc.)
animation-delay → Espera antes de começar
animation-iteration-count → Quantas vezes roda (1, infinite)
animation-direction → Direção alternada (normal, reverse, alternate)
animation-fill-mode → Mantém o estilo final (forwards, backwards, both)
Exemplo:
.elemento {
animation: girar 3s linear infinite alternate;
}
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
💡 Exemplo Prático: Loader Animado
📄 HTML
<div class="loader"></div>
📄 CSS
.loader {
width: 50px;
height: 50px;
border: 6px solid #ccc;
border-top-color: #0077ff;
border-radius: 50%;
animation: girar 1s linear infinite;
}
@keyframes girar {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
💥 Resultado: um ícone de carregamento girando, feito apenas com CSS!
🧱 Exemplo 2: Banner Deslizante
📄 HTML
<h1 class="slide">Bem-vindo ao Meu Site!</h1>
📄 CSS
.slide {
opacity: 0;
transform: translateY(50px);
animation: subir 1.5s ease forwards;
}
@keyframes subir {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
💡 O título “entra” de forma suave — perfeito para introduções de página.
🎨 Exemplo 3: Card 3D com Hover Animado
📄 HTML
<div class="card">
<h3>Design Avançado</h3>
<p>Animações e interações modernas em CSS.</p>
</div>
📄 CSS
body {
background: linear-gradient(135deg, #a2d2ff, #cdb4db);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
.card {
background: white;
border-radius: 16px;
padding: 40px;
text-align: center;
width: 280px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
transition: transform 0.6s ease, box-shadow 0.6s ease;
}
.card:hover {
transform: rotateY(10deg) translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
💎 Efeito: um cartão que flutua e gira levemente quando você passa o mouse — moderno e elegante.
⚡ Dica Extra — Biblioteca de Efeitos Prontos
Se quiser começar rápido:
👉 Utilize Animate.css
Uma biblioteca fácil de usar com dezenas de efeitos prontos.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<h2 class="animate__animated animate__bounce">Olá Mundo!</h2>
🔥 Microinterações — Pequenos Detalhes, Grande Impacto
Pequenas animações ajudam o usuário a entender ações, como cliques e carregamentos.
Exemplos:
● Botões que deslizam ou pulsam ao clicar;
● Ícones que giram levemente;
● Formulários com campos que destacam ao entrar em foco;
● “Toasts” de notificação que aparecem suavemente.
Esses detalhes tornam o design mais humano e agradável.
Comentários
Postar um comentário