Todas rodando de verdade nesta página, sem nenhuma biblioteca. Role para ver cada uma funcionando, com o nome que ela tem no mundo real e a explicação de quando vale usar.
Se você olhar dez páginas boas hoje, vai encontrar essas dez. São as animações que viraram gramática: ninguém repara nelas, mas todo mundo sente falta quando não estão.
Só a transparência muda, de invisível para visível. É a animação mais usada da web inteira e a mais segura: não desloca nada, então nunca atrapalha a leitura.
Aparece deslocando alguns pixels para cima. O pequeno movimento dá direção à leitura e é o efeito padrão de rolagem em praticamente todo site moderno.
O cartão sobe e ganha sombra quando o mouse chega. É transição e não animação, então ele volta sozinho ao normal quando o mouse sai.
Nasce menor e cresce até o tamanho final, passando um pouco do ponto antes de assentar. Esse exagero de meio quadro é o que dá a sensação de mola.
Os itens entram um depois do outro. Cada elemento carrega só o número da sua posição e uma linha de CSS calcula o atraso de todos.
Entra pela esquerda ou pela direita. Funciona bem quando a posição significa alguma coisa, como em conversas, comparações e menus.
Cresce e volta em ciclo, às vezes com um anel que se expande e some. Serve para puxar o olho até o botão principal sem mover nada de lugar.
O indicador de carregamento mais comum que existe. É a única situação em que velocidade constante é a escolha certa, porque qualquer aceleração pareceria defeito.
A linha nasce e se estica sob o texto quando o mouse chega. Um detalhe pequeno que faz links parecerem cuidados em vez de padrão de navegador.
Uma faixa clara cruza a superfície de tempos em tempos. O segredo é a pausa: ela fica parada quase todo o ciclo e atravessa rápido, senão vira pisca-pisca.
Já não são obrigatórias, mas resolvem problemas reais: mostrar progresso, ocupar a espera, revelar informação sem trocar de página. É aqui que a maioria dos sites para.
A barra se preenche até o valor quando aparece na tela. Escalar em X custa quase nada, enquanto animar a largura obriga o navegador a recalcular o layout a cada quadro.
Abre e fecha revelando o conteúdo. O truque moderno é animar as linhas da grade de zero para um, o que funciona sem precisar saber a altura do texto de antemão.
Não. O motor de áudio já vem dentro do pacote.
Sim, o mesmo arquivo instala nos dois sistemas.
Sobe e desce alguns pixels, para sempre. Com atrasos diferentes entre os elementos, o conjunto parece vivo sem que nenhum deles chame atenção sozinho.
Escala mínima somada a um brilho que abre e fecha. Dá presença a um objeto central sem movimento aparente, como se ele estivesse ligado.
Blocos cinzentos com um brilho passando, no formato do conteúdo que está por vir. Substituiu a rodinha porque a espera parece menor quando você já vê o layout.
Sobe e cai várias vezes, cada quique menor que o anterior. Copiar essa perda de energia é o que separa o quique convincente do robótico.
O conteúdo desliza sem começo nem fim. O segredo é duplicar a lista e mover o trilho exatamente metade da largura, o que faz o ponto de emenda ficar invisível. Passe o mouse para pausar.
O número sobe de zero até o valor final. O CSS não sabe contar, então esta é uma das poucas que precisa de JavaScript, mas a desaceleração segue a mesma curva das outras.
O texto surge caractere por caractere, com um cursor piscando no fim. Feito só com CSS: a largura cresce em degraus, e cada degrau revela uma letra.
O fundo é feito maior que o elemento e sua posição desliza devagar. Dá movimento constante a uma área grande sem animar forma nenhuma.
Custam o mesmo que as de cima e quase não aparecem por aí. São as que fazem uma página parecer feita por alguém, e não montada em modelo pronto. Use uma ou duas por site, nunca todas.
O texto não se move: uma faixa passa por cima e o descobre. Vem do design editorial e tem um ar bem mais sofisticado que o desaparecer comum.
A linha aparece como se estivesse sendo desenhada. O truque é antigo e engenhoso: a linha vira um tracejado do tamanho dela mesma, e o vazio é empurrado para fora.
Duas faces ocupam o mesmo espaço e o bloco gira meia volta. A face de trás já nasce virada, e o navegador esconde o verso de cada uma.
O objeto se inclina na direção do mouse, como se fosse uma placa física. O JavaScript só mede onde o ponteiro está: quem faz a inclinação e a suavização é o CSS.
Um círculo nasce exatamente onde você clicou e cresce sumindo. Veio do Android e virou a forma mais clara de confirmar que o toque foi registrado.
Entra fora de foco e ganha nitidez, como uma lente ajustando. É elegante, mas é a mais cara da lista: desfoque consome bem mais que mover ou apagar.
Cada letra sobe e desce um pouco depois da anterior, e o conjunto vira uma onda que atravessa a palavra. Cada letra precisa ser um elemento próprio.
Uma gota que nunca repete o mesmo contorno. Sai de graça: o arredondamento de borda aceita oito valores, e animar esses valores derrete a forma.
Duas cópias coloridas do mesmo texto piscam deslocadas, imitando defeito de tela. Combina com tecnologia e jogos, e destoa de quase todo o resto.
O botão se desloca na direção do mouse quando ele se aproxima, como se atraísse o ponteiro. Aplique em um único elemento da página, senão o efeito perde a graça.
Todas as animações estão em source/animacoes.css, comentadas uma a uma. O layout está em source/base.css e as quatro que precisam de JavaScript estão em source/app.js. O texto que o botão Copiar efeito entrega fica em source/codigos.js, que é gerado a partir do CSS de verdade pelo source/gerar-codigos.py: mexeu no CSS, roda o gerador e o código copiado continua igual ao que você vê rodando. Quem prefere menos movimento vê a página inteira parada e completa, porque o sistema respeita a configuração de acessibilidade do aparelho.