Fade Up
Também chamada Fade In Up, Reveal on Scroll
O elemento sobe um pouco enquanto aparece, como se estivesse se encaixando no lugar.
Onde usar
Títulos de seção, cards e imagens que aparecem ao rolar a página
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
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).Animações parecidas
A
Fade In Directional
Também chamada Fade In Down, Fade In Left, Fade In Right
O elemento aparece enquanto se desloca um pouco a partir de um lado até a posição final.
Onde usar
Seções e cards que aparecem ao carregar ou rolar a página
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).A
Slide In
Também chamada Slide In Up, Slide In Down, Slide In Left, Slide In Right
O elemento desliza de fora da borda do contêiner até a posição de repouso, sem esmaecer.
Onde usar
Gavetas, painéis laterais, banners
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).Stagger
Também chamada Staggered Animation, Cascade
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.
Onde usar
Listas, grades, menus de navegação e resultados de busca
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).A
Fade In / Fade Out
Também chamada Fade
O elemento passa de totalmente transparente a totalmente opaco no lugar, ou o contrário ao sair.
Onde usar
Modais, toasts e conteúdo de página surgindo
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).Mais em Entrance & Exit
ABCD
O elemento acende com piscadas rápidas de opacidade, como um letreiro de neon com defeito, antes de ficar visível.
Onde usar
Efeitos de texto neon e retrô
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).A
O elemento dá uma volta completa no eixo Y enquanto se aproxima um pouco de quem vê e volta.
Onde usar
Revelação de um card ou badge chamando atenção
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).A
Flip In
Também chamada Flip In X, Flip In Y
O elemento gira em 3D no eixo horizontal ou vertical, de lado até ficar de frente para quem vê.
Onde usar
Revelação de cards e blocos
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).