Rotate Out
O elemento gira em torno de um ponto de apoio enquanto desaparece.
Onde usar
Descarte divertido de itens
Variações
- center
- down-left
- down-right
- up-left
- up-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 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).Animações parecidas
A
O elemento sai rolando para a direita enquanto desaparece.
Onde usar
Remoção divertida de itens de lista
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).A
O elemento gira em uma dobradiça no canto superior esquerdo, balança e depois cai para fora da tela.
Onde usar
Remoção de um elemento em estilo cômico
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).A
Rotate In
Também chamada Rotate In Down Left
O elemento entra girando em torno de um canto ou do próprio centro enquanto aparece.
Onde usar
Entrada divertida de ícones ou cards
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).Mais em Entrance & Exit
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).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).