Simples fade IN / fade out ao hover usando css3

Nos velhos tempos (era jQuery), usávamos .animate() ou .fadeIn() para efeitos de hover. Em 2026, usar JavaScript para isso é um crime contra o desempenho.

A transition CSS3 é acelerada por hardware (gerida pela GPU), mais suave e requer zero scripts.

Por que as transições CSS vencem o javascript

Benefícios de Desempenho:

• Aceleração GPU: As transições CSS correm na placa gráfica, não na CPU
• Sem Execução de JavaScript: Zero sobrecarga de script, resposta instantânea
• Otimização do Navegador: Os navegadores otimizam animações CSS nativamente
• Amigo da Bateria: Menos uso de CPU significa maior vida útil da bateria no telemóvel

Efeito fade básico

Digamos que tem uma imagem que deve escurecer quando passa o rato sobre ela.

/* O Elemento */
.hover-image {
    opacity: 1;
    /* A Parte Mágica */
    transition: opacity 0.3s ease-in-out;
}

/* O Gatilho */
.hover-image:hover {
    opacity: 0.7;
}

O que acontece:

1. A imagem começa com opacity: 1 (totalmente visível)
2. Ao passar o rato, transita para opacity: 0.7 (30% transparente)
3. Leva 0.3 segundos com suavização suave
4. Retorna a opacity: 1 quando o hover termina

Compreender as propriedades de transição

Transition-property

Especifica qual propriedade CSS animar. Especifique sempre propriedades específicas em vez de all para melhor desempenho.

/* Bom: Propriedade específica */
transition: opacity 0.3s ease-in-out;

/* Melhor: Múltiplas propriedades específicas */

/* Evitar: Anima TODAS as propriedades (impacto no desempenho) */

Transition-duration

Quanto tempo a animação demora. Valores comuns:

/* Muito rápido (subtil) */

/* Padrão (ponto ideal para UI) */

Transition-timing-function

Controla a curva de aceleração. É isto que faz as animações parecerem “naturais”.

/* Linear: Velocidade constante (robótico) */

/* Ease: Início lento, meio rápido, fim lento (padrão) */

/* Ease-in-out: Início e fim lentos, meio rápido (muito suave) */

Sintaxe abreviada completa

Exemplos:

/* Propriedade única */

/* Com atraso */

Efeitos hover avançados

1. Fade + escala (efeito zoom)

Combine opacidade e transformação para um efeito de zoom moderno:

.card-img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-img:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

2. Fade + texto sobreposto

Perfeito para galerias de imagens:

.image-container img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.image-container:hover img {
    opacity: 0.7;
}

Resumo

As transições CSS são a forma moderna e performante de criar efeitos de hover.

Pontos Chave:

• Use propriedades específicas, não all
• 0.2-0.3s é o ponto ideal para interações UI
• ease-out parece o mais natural
• Use transform em vez de propriedades de posição/tamanho
• Teste em dispositivos reais