Entrance & Exit

O elemento começa reduzido e deslocado, depois desliza para dentro e cresce até o tamanho total.

Adicione uma animação de entrada "Back In" (também chamada back in up ou back in down) em [onde].
O elemento deve chegar de fora de uma borda, reduzido e levemente transparente, e crescer até o tamanho total ao alcançar seu lugar: um movimento deliberado em duas etapas, não um surgimento rápido.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento encolhe e desliza em direção a uma borda enquanto desaparece.

Adicione uma animação de saída "Back Out" em [onde].
O elemento deve primeiro encolher um pouco no lugar e depois deslizar em direção a uma borda enquanto desaparece: uma saída deliberada em duas etapas, não um único fade rápido.
Remova o elemento só depois que a animação terminar, para o layout não pular no meio do movimento, e remova na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento começa bem desfocado e vai ganhando nitidez, muitas vezes enquanto desliza ou aparece.

Adicione uma animação de entrada "Blur In" (também chamada text focus in, focus in ou blur text reveal) em [onde].
O conteúdo deve começar bem desfocado e transparente e depois ganhar nitidez no lugar: suave e um tanto lento, sem deslocamento.
Reproduza só uma vez e mostre o texto nítido imediatamente se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento fica cada vez mais desfocado enquanto desaparece ou desliza para fora.

Adicione uma animação de saída "Blur Out" (também chamada text blur out ou smoky text dissipate) em [onde].
O conteúdo deve ficar cada vez mais desfocado enquanto desaparece no lugar: suave e um tanto lento, como se estivesse se dissolvendo.
Oculte ou remova o elemento só depois que o desfoque terminar, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento entra com um quique que passa do ponto e se acomoda, crescendo ou caindo a partir de uma borda.

Adicione uma animação de entrada "Bounce In" (também chamada bounce in down ou bounce in up) em [onde].
O elemento deve crescer a partir de pequeno, passar do tamanho total e balançar algumas vezes antes de se acomodar: rápido e elástico.
Reproduza só uma vez para não ficar chamando atenção, e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento quica de leve e depois encolhe ou sai voando por uma borda.

Adicione uma animação de saída "Bounce Out" em [onde].
O elemento deve afundar um pouco, inchar um pouco além do seu tamanho e depois encolher enquanto desaparece: curto e elástico.
Tire-o do layout só depois que a animação terminar, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um clip-path ou máscara cresce a partir de uma borda ou ponto e vai revelando a imagem ou o texto.

Adicione um efeito de entrada "Clip Reveal" (também chamado mask reveal, wipe reveal ou image reveal) em [onde].
Uma borda de recorte deve varrer da esquerda para a direita, revelando o conteúdo aos poucos enquanto ele fica parado: fluido, com início e fim suaves.
Reserve o espaço do elemento desde o início para nada se deslocar, e mostre tudo revelado se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento passa de totalmente transparente a totalmente opaco no lugar, ou o contrário ao sair.

Adicione uma animação "Fade In / Fade Out" (também chamada fade) em [onde].
O elemento deve passar de totalmente transparente a totalmente visível no lugar ao aparecer, e sumir da mesma forma ao sair: suave, sem deslocamento nem mudança de escala.
Depois que ele sumir, garanta que não possa mais ser clicado nem alcançado pelo teclado, e troque na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento aparece enquanto se desloca um pouco a partir de um lado até a posição final.

Adicione uma animação de entrada "Fade In Directional" (também chamada fade in left, fade in right ou fade in down) em [onde].
O elemento deve aparecer enquanto se desloca um pouco a partir de um lado até a posição final: rápido e fluido, desacelerando ao chegar, sem quique.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento desaparece enquanto se desloca em uma direção.

Adicione uma animação de saída "Fade Out Directional" (também chamada fade out up ou fade out down) em [onde].
O elemento deve desaparecer enquanto se desloca um pouco em uma direção: rápido, acelerando ao sair.
Tire-o do layout só depois que o fade terminar, para o conteúdo vizinho não pular antes da hora, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento sobe um pouco enquanto aparece, como se estivesse se encaixando no lugar.

Adicione uma animação de entrada "Fade Up" (também chamada fade-in-up ou reveal on scroll) em [onde].
Os elementos devem subir levemente enquanto aparecem, na primeira vez que entram na tela ao rolar: sutil e rápido, sem efeito de quique.
Reproduza só uma vez e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento acende com piscadas rápidas de opacidade, como um letreiro de neon com defeito, antes de ficar visível.

Adicione uma animação de entrada "Flicker In" em [onde].
O elemento deve acender e apagar algumas vezes em intervalos irregulares, como um letreiro de neon com defeito, antes de ficar aceso: piscadas secas, sem deslocamento.
Reproduza só uma vez, com poucas piscadas e lentas o bastante para serem seguras para pessoas sensíveis a luz piscante, e mostre aceso de forma fixa se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento dá uma volta completa no eixo Y enquanto se aproxima um pouco de quem vê e volta.

Adicione uma animação "Flip" em [onde].
O elemento deve dar uma volta completa no seu eixo vertical enquanto se aproxima um pouco de quem vê, e depois voltar com uma leve diminuição de tamanho: animado, mas breve.
Dê perspectiva para o giro parecer ter profundidade, reproduza só uma vez em vez de em loop, e pule o giro se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira em 3D no eixo horizontal ou vertical, de lado até ficar de frente para quem vê.

Adicione uma animação de entrada "Flip In" (também chamada flip in X ou flip in Y) em [onde].
O elemento deve começar de lado e girar no eixo horizontal até ficar de frente, passando um pouco do ponto e voltando antes de se acomodar: rápido, com uma pequena oscilação.
Dê perspectiva para o giro parecer ter profundidade, e mostre de frente sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira em 3D até ficar de lado e invisível.

Adicione uma animação de saída "Flip Out" (também chamada flip out X ou flip out Y) em [onde].
O elemento deve se inclinar um pouco para trás e depois girar no eixo vertical até ficar de lado e sumir: rápido e preciso.
Dê perspectiva para o giro parecer ter profundidade, remova o elemento só depois que o giro terminar, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira em uma dobradiça no canto superior esquerdo, balança e depois cai para fora da tela.

Adicione uma animação de saída "Hinge" em [onde].
O elemento deve despencar a partir do canto superior esquerdo como se um parafuso tivesse se soltado, balançar para lá e para cá e depois cair para fora da tela enquanto desaparece: lento, cômico e deliberado.
Deixe-o cair por cima do resto do conteúdo sem empurrar o layout nem criar barras de rolagem, remova depois que ele cair, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento salta de um estado pequeno e inclinado, passa do ponto e se acomoda como um boneco de mola saindo da caixa.

Adicione uma animação de entrada "Jack In The Box" em [onde].
O elemento deve saltar de um estado minúsculo e inclinado, ancorado na borda inferior, balançar de um lado para o outro passando da vertical e se acomodar: elástico e divertido.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento entra disparado pela lateral, inclinado, e se endireita ao chegar.

Adicione uma animação de entrada "Light Speed In" (também chamada lightspeed in) em [onde].
O elemento deve entrar rápido pela lateral, inclinado como se estivesse em alta velocidade, corrigir demais a inclinação uma vez e se endireitar ao chegar: rápido e marcante, desacelerando no fim.
Evite que ele gere uma barra de rolagem horizontal enquanto ainda está fora da tela e mostre-o no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento se inclina e sai em disparada para o lado enquanto desaparece.

Adicione uma animação de saída "Light Speed Out" (também chamada lightspeed out) em [onde].
O elemento deve se inclinar e sair em disparada para o lado enquanto desaparece: rápido, acelerando ao sair.
Evite que ele gere uma barra de rolagem horizontal ao passar pela borda e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento encolhe de um estado grande, desfocado e transparente até ficar nítido, como uma baforada de fumaça, ou o contrário ao sair.

Adicione uma animação "Puff In / Puff Out" (também chamada puff) em [onde].
Ao aparecer, o elemento deve encolher de um estado grande, desfocado e transparente até ficar nítido, como uma baforada de fumaça que se assenta; ao sair, deve inchar de novo em um desfoque e sumir: suave e bem rápido.
Evite que o estado ampliado empurre o layout ou gere barras de rolagem e troque na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento entra rolando pela esquerda como uma roda enquanto aparece.

Adicione uma animação de entrada "Roll In" em [onde].
O elemento deve entrar rolando pela esquerda como uma roda, girando enquanto se move, e aparecer ao mesmo tempo: suave, desacelerando ao chegar.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento sai rolando para a direita enquanto desaparece.

Adicione uma animação de saída "Roll Out" em [onde].
O elemento deve sair rolando para a direita como uma roda, girando enquanto se move, e desaparecer ao mesmo tempo: suave, acelerando ao sair.
Tire-o do layout só depois que ele terminar de rolar e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento entra girando em torno de um canto ou do próprio centro enquanto aparece.

Adicione uma animação de entrada "Rotate In" (também chamada rotate in down left) em [onde].
O elemento deve girar até o lugar em torno do canto inferior esquerdo, partindo de um ângulo inclinado, enquanto aparece: suave e sem pressa, desacelerando ao se assentar.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira em torno de um ponto de apoio enquanto desaparece.

Adicione uma animação de saída "Rotate Out" em [onde].
O elemento deve girar em torno do centro, um pouco mais de meia volta, enquanto desaparece: suave, acelerando ao sair.
Remova-o só depois que o giro terminar e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento desliza de fora da borda do contêiner até a posição de repouso, sem esmaecer.

Adicione uma animação de entrada "Slide In" (também chamada slide in left, slide in right, slide in up ou slide in down) em [onde].
O elemento deve deslizar de fora da borda do contêiner até o lugar, totalmente opaco o tempo todo: rápido, desacelerando suavemente e sem quique.
Corte-o na borda do contêiner para que não sobreponha os vizinhos nem gere barras de rolagem enquanto está fora e mostre-o no lugar se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento desliza para além da borda de um contêiner e desaparece.

Adicione uma animação de saída "Slide Out" (também chamada slide out up ou slide out down) em [onde].
O elemento deve deslizar para além da borda do contêiner e desaparecer, continuando totalmente opaco: rápido, acelerando ao sair.
Corte-o na borda do contêiner, esconda-o do teclado e dos leitores de tela quando sair de vista e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os itens de um grupo se animam um após o outro com um pequeno atraso, formando uma onda em vez de aparecerem todos de uma vez.

Adicione uma animação "Stagger" (também chamada staggered animation ou cascata) em [onde].
Os itens devem aparecer subindo um após o outro com um atraso curto e uniforme, para que o grupo pareça uma onda rápida e não tudo de uma vez.
Mantenha a sequência curta mesmo em listas longas, reproduza só uma vez ao entrar na tela e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira e cresce a partir de um ponto enquanto aparece.

Adicione uma animação de entrada "Swirl In" (também chamada swirl in forward) em [onde].
O elemento deve girar bem mais de uma volta completa enquanto cresce de um único ponto até o tamanho total e aparece: rápido no início, desacelerando ao se assentar.
Reproduza só uma vez em um único elemento, não em um grupo inteiro, e mostre-o no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras começam bem espaçadas e apagadas e se aproximam até o espaçamento normal enquanto aparecem.

Adicione uma animação de texto "Tracking In" (também chamada text tracking in ou letter-spacing in) em [onde].
As letras devem começar bem espaçadas e apagadas e se aproximar até o espaçamento normal enquanto ficam totalmente visíveis: suave, desacelerando no fim.
Mantenha o texto centralizado e em uma única linha enquanto o espaçamento muda, para o layout ao redor não se mexer, e mostre-o com espaçamento normal se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento cresce de um estado pequeno e transparente até o tamanho total enquanto aparece.

Adicione uma animação de entrada "Zoom In" (também chamada scale in) em [onde].
O elemento deve crescer de pequeno e transparente até o tamanho total enquanto aparece: rápido e suave, sem passar do tamanho final.
Escale-o a partir do centro sem afetar o layout ao redor e mostre-o no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento encolhe e esmaece até sumir.

Adicione uma animação de saída "Zoom Out" (também chamada scale out) em [onde].
O elemento deve encolher em direção ao centro enquanto esmaece até sumir: rápido, acelerando ao sair.
Tire-o do layout e do foco do teclado só depois que ele sumir e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).