Jack In The Box
O elemento salta de um estado pequeno e inclinado, passa do ponto e se acomoda como um boneco de mola saindo da caixa.
Onde usar
Revelação surpresa
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 "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).Animações parecidas
A
Bounce In
Também chamada Bounce In Down, Bounce In Up
O elemento entra com um quique que passa do ponto e se acomoda, crescendo ou caindo a partir de uma borda.
Onde usar
Badges de notificação e modais divertidos
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).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).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).A
Back In
Também chamada Back In Up, Back In Down
O elemento começa reduzido e deslocado, depois desliza para dentro e cresce até o tamanho total.
Onde usar
Elementos hero e cards
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).Mais em Entrance & Exit
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
Light Speed Out
Também chamada Lightspeed Out
O elemento se inclina e sai em disparada para o lado enquanto desaparece.
Onde usar
Saída marcante
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).A
Puff In / Puff Out
Também chamada Puff
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.
Onde usar
Aparição suave de objetos
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).