Spin
Também chamada Rotate Loop, Spinner
O elemento gira continuamente em velocidade constante.
Onde usar
Indicadores de carregamento (spinners)
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 "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).Animações parecidas
A
Passe o mouse por cima
Um ícone dentro de um botão gira quando o mouse passa sobre o botão.
Onde usar
Botões de ícone
Adicione um efeito de hover "Icon Spin" em [onde].
O ícone dentro do elemento deve dar uma volta completa com suavidade quando o ponteiro entrar, e girar de volta quando sair.
Gire só o ícone, não o botão inteiro, e mostre o mesmo efeito no foco do teclado.Circular Spinner
Também chamada Spinner, Throbber, Circular indeterminate
Um anel ou arco gira continuamente para mostrar que algo está carregando.
Onde usar
Botões, carregamento de páginas
Adicione um "Circular Spinner" (também chamado spinner ou throbber) em [onde].
Um arco deve girar de forma constante em volta de um anel suave enquanto se alonga e encurta, fluido e contínuo.
Mantenha a rotação contínua, dê a ele um rótulo de carregamento para leitores de tela e desacelere ou pare se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Passe o mouse por cima
O elemento gira alguns graus ao passar o mouse.
Onde usar
Ícones, miniaturas
Adicione um efeito de hover "Rotate" em [onde].
O elemento deve girar levemente no sentido horário enquanto o ponteiro estiver sobre ele e voltar quando sair: suave e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.ABCDEFGHIJKLMNOP
Spinning Text
Também chamada Circular Text, Text on Circle
O texto fica disposto em volta de um círculo que gira sem parar.
Onde usar
Selos e badges giratórios
Adicione "Spinning Text" (também chamado circular text ou text on circle) em [onde].
As letras devem ficar espaçadas de forma uniforme em volta de um círculo que gira devagar e de forma constante, sem salto quando o loop recomeça.
Entregue o texto aos leitores de tela uma única vez como texto normal e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).Mais em Emphasis
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.A
O elemento cresce, balança com rotação e volta ao tamanho original, como uma pequena comemoração.
Onde usar
Estados de sucesso, comemorações
Adicione um efeito de atenção "Tada" em [onde].
O elemento deve diminuir um pouco, depois crescer e balançar de um lado para o outro com uma inclinação rápida antes de voltar ao tamanho normal, como uma pequena comemoração.
Reproduza uma vez, por exemplo logo após um sucesso, e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).Vibrate
Também chamada Vibration, Buzz
O elemento treme rapidamente em pequenos solavancos em várias direções, como um celular vibrando.
Onde usar
Alertas, avisos no estilo de chamada recebida
Adicione um efeito de atenção "Vibrate" (também chamado buzz ou vibration) em [onde].
O elemento deve tremer em solavancos minúsculos e rápidos em várias direções por um breve momento, como um celular vibrando, e depois parar.
Mantenha o movimento bem pequeno para que o conteúdo continue legível, e reproduza uma vez por alerta em vez de repetir em loop.