📚 Objetivo da Aula: Dominar as transformações 2D e transições CSS para criar interfaces dinâmicas e interativas. Aprenderemos desde movimentos básicos até animações complexas com controle total sobre timing e efeitos.
🔄 1. Transformações 2D - Os Cinco Pilares
As transformações 2D permitem modificar elementos sem afetar o layout da página. São a base para criar movimento e interatividade.
🎯 Galeria Interativa de Transformações:
Passe o mouse sobre cada card para ver a transformação!
.elemento {
transform: translate(50px, -20px); /* Move 50px→ e 20px↑ */
transform: translateX(100px); /* Move apenas horizontalmente */
transform: translateY(-30px); /* Move apenas verticalmente */
}
/* SCALE - Redimensionamento */
.elemento {
transform: scale(1.5); /* Aumenta 50% em ambas dimensões */
transform: scaleX(2); /* Estica horizontalmente */
transform: scaleY(0.5); /* Comprime verticalmente */
}
/* ROTATE - Rotação */
.elemento {
transform: rotate(45deg); /* Gira 45 graus horário */
transform: rotate(-90deg); /* Gira 90 graus anti-horário */
}
/* SKEW - Inclinação */
.elemento {
transform: skew(15deg, 5deg); /* Inclina em X e Y */
transform: skewX(20deg); /* Inclina apenas em X */
}
/* COMBINAÇÕES - O poder real! */
.elemento {
transform: translate(20px, -10px) rotate(30deg) scale(1.2);
}
🎯 Pontos Importantes:
• Ordem importa: translate → rotate → scale (recomendado)
• Transform-origin: Define o ponto de rotação/escala
• Performance: Transform é otimizado pelo navegador
• Layout: Não afeta posição de outros elementos
⏱️ 2. Transições - Movimento Suave Entre Estados
Transições criam mudanças graduais entre valores de propriedades CSS, proporcionando fluidez visual.
🎨 Comparativo de Velocidades de Transição:
Clique nas caixas para ver diferentes velocidades!
⚡ 0.1s RÁPIDA
⚖️ 0.3s NORMAL
🐌 1s LENTA
🐢 2s MUITO LENTA
/* 🎬 Sintaxe Completa das Transições */
.elemento {
/* Propriedade individual */
transition-property: transform; /* Que propriedade animar */
transition-duration: 0.3s; /* Duração da transição */
transition-timing-function: ease; /* Curva de animação */
transition-delay: 0.1s; /* Atraso antes de iniciar */
/* Sintaxe abreviada (recomendada) */
transition: transform 0.3s ease 0.1s;
/* Múltiplas propriedades */
transition:
transform 0.3s ease,
background-color 0.2s linear,
box-shadow 0.4s ease-out;
/* Todas as propriedades */
transition: all 0.3s ease;
}
📈 3. Timing Functions - Curvas de Animação
As funções de timing controlam a aceleração da animação, criando diferentes sensações de movimento.
🎭 Comparativo de Easing Functions:
Passe o mouse sobre cada caixa para comparar as curvas!
LINEAR
EASE
EASE-IN
EASE-OUT
EASE-IN-OUT
CUBIC-BEZIER
🎯 Quando Usar Cada Easing:
• linear - Movimento robótico, carregamentos
• ease - Padrão, naturalmente acelerado
• ease-in - Começa devagar, acelera no final
• ease-out - Começa rápido, desacelera no final
• ease-in-out - Suave no início e fim
• cubic-bezier() - Controle personalizado total
🎪 4. Animações CSS - Controle Total do Movimento
Animações CSS permitem criar sequências complexas de movimento sem JavaScript.
Use os botões para aplicar transformações ao elemento central:
🎯 CSS
🎯 Experimente as Transformações:
• Translate: Move o elemento horizontalmente
• Scale: Aumenta o tamanho em 50%
• Rotate: Gira 180 graus
• Skew: Inclina o elemento
• Combo: Combina múltiplas transformações
• Reset: Volta ao estado original
🚀 Dicas de Performance:
Use transform em vez de mudar top/left/width/height
Prefira opacity e transform para animações suaves
will-change avisa o navegador sobre animações futuras
Hardware acceleration com transform3d(0,0,0)
🎯 Aplicações Práticas:
Micro-interações: Hover em botões e cards
Loading states: Spinners e barras de progresso
Page transitions: Entrada e saída de conteúdo
UI feedback: Confirmações e notificações
Storytelling: Animações narrativas
⚠️ Boas Práticas:
Não abuse: Muita animação pode cansar o usuário
Respeite prefers-reduced-motion para acessibilidade