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
Variações
- up
- down
- left
- right
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 "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).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).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
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).A
Light Speed In
Também chamada Lightspeed In
O elemento entra disparado pela lateral, inclinado, e se endireita ao chegar.
Onde usar
Entrada marcante de banners ou títulos
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).A
Drawer Slide (menu lateral)
Também chamada Off-canvas, Side sheet, Slide-over, Navigation drawer
Um painel lateral desliza a partir da borda esquerda, direita ou superior, empurrando ou cobrindo o conteúdo.
Onde usar
Navegação mobile, painéis de configurações, carrinhos
Adicione um menu lateral ("Drawer Slide", também chamado off-canvas ou side sheet) em [onde].
O painel deve deslizar a partir da borda lateral sobre o conteúdo enquanto a página de trás escurece, rápido e desacelerando suavemente, e sair do mesmo jeito ao fechar.
Mantenha o foco do teclado dentro do menu aberto, feche com Escape ou com um clique na área escurecida, e devolva o foco ao botão que o abriu.Mais em Entrance & Exit
A
Slide Out
Também chamada Slide Out Up, Slide Out Down
O elemento desliza para além da borda de um contêiner e desaparece.
Onde usar
Fechamento de gavetas e painéis
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).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
Swirl In
Também chamada Swirl In Forward
O elemento gira e cresce a partir de um ponto enquanto aparece.
Onde usar
Entrada de elementos decorativos ou logos
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).