Fade Out Directional

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).

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 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 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 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).