Rubber Band
Também chamada Rubberband
O elemento se estica na horizontal e se achata na vertical em etapas elásticas antes de voltar ao normal.
Onde usar
Feedback de botões, chamar a atenção
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 um efeito de atenção "Rubber Band" (também chamado rubberband) em [onde].
O elemento deve se esticar na largura e se achatar na altura, depois voltar em alguns passos elásticos menores até parar no tamanho normal.
Reproduza uma vez ao ser acionado e não deixe o layout ao redor se deslocar enquanto ele estica.Animações parecidas
A
Jello
Também chamada Jelly
O elemento se inclina de um lado para o outro com amplitude cada vez menor, como uma gelatina balançando.
Onde usar
Destaque divertido em botões ou logos
Adicione um efeito de atenção "Jello" (também chamado jelly) em [onde].
O elemento deve se inclinar de um lado para o outro como uma gelatina balançando: forte no início e parando rapidamente.
Reproduza uma vez ao ser acionado e mantenha o espaço ocupado pelo elemento para que o conteúdo próximo não se desloque.A
Passe o mouse por cima
Bounce Scale
Também chamada Bounce In / Out
O elemento muda de escala com um exagero elástico quando o hover começa ou termina.
Onde usar
Botões, badges
Adicione um efeito de hover "Bounce Scale" (também chamado bounce in / out) em [onde].
O elemento deve crescer um pouco com um quique elástico visível, passando rapidamente do tamanho final antes de se assentar, e voltar com o mesmo quique quando o ponteiro sair.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.Shake
Também chamada Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
O elemento treme rapidamente para frente e para trás em um único eixo.
Onde usar
Feedback de erro em formulários
Adicione um efeito "Shake" (também chamado error shake ou invalid input shake) em [onde].
O elemento deve tremer rápido para a esquerda e para a direita algumas vezes e parar exatamente onde começou: rápido e firme.
Reproduza uma vez sempre que o erro acontecer, em vez de repetir em loop, e combine com uma mensagem de erro visível para que o significado não dependa só do movimento.A
Passe o mouse por cima
O elemento aumenta rapidamente e volta ao tamanho com um salto elástico.
Onde usar
Ícones, botões
Adicione um efeito de hover "Pop" em [onde].
Toda vez que o ponteiro entrar, o elemento deve inchar uma vez rapidamente e voltar ao tamanho normal, como um pequeno salto elástico.
Reproduza uma vez por hover em vez de manter o tamanho maior ou repetir em loop, e evite que o layout ao redor se desloque.Mais em Emphasis
Spin
Também chamada Rotate Loop, Spinner
O elemento gira continuamente em velocidade constante.
Onde usar
Indicadores de carregamento (spinners)
Adicione um efeito "Spin" (também chamado spinner ou rotate loop) em [onde].
O elemento deve girar continuamente em uma velocidade constante e uniforme, sem easing entre as voltas.
Deixe o loop contínuo, dê ao spinner um rótulo de carregamento acessível, e desacelere ou pare se o usuário preferir movimento reduzido (prefers-reduced-motion).A
O elemento balança de um lado para o outro a partir da borda superior, como um pêndulo com amplitude cada vez menor.
Onde usar
Placas penduradas, ícones de notificação
Adicione um efeito de atenção "Swing" em [onde].
O elemento deve balançar de um lado para o outro como uma placa pendurada, começando com um balanço amplo que diminui rápido.
Faça o elemento girar a partir da borda superior, e não do centro, e reproduza uma vez ao ser acionado.