Flicker In
O elemento acende com piscadas rápidas de opacidade, como um letreiro de neon com defeito, antes de ficar visível.
Onde usar
Efeitos de texto neon e retrô
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 "Flicker In" em [onde].
O elemento deve acender e apagar algumas vezes em intervalos irregulares, como um letreiro de neon com defeito, antes de ficar aceso: piscadas secas, sem deslocamento.
Reproduza só uma vez, com poucas piscadas e lentas o bastante para serem seguras para pessoas sensíveis a luz piscante, e mostre aceso de forma fixa se o usuário preferir movimento reduzido (prefers-reduced-motion).Animações parecidas
ABC
Flicker
Também chamada Flickering
A opacidade do elemento oscila de forma irregular, como uma luz falhando.
Onde usar
Efeitos de neon e glitch
Adicione um efeito "Flicker" (também chamado flickering) em [onde].
O elemento deve ficar estável na maior parte do tempo e escurecer em falhas curtas e irregulares, como um neon com defeito.
Mantenha o ritmo irregular em vez de uniforme, evite piscadas rápidas em intensidade máxima e pare o efeito para usuários que preferem movimento reduzido.Flash
Também chamada Blink
O elemento pisca alternando rapidamente a opacidade.
Onde usar
Alertar sobre conteúdo novo
Adicione um efeito de atenção "Flash" (também chamado blink) em [onde].
O elemento deve piscar sumindo e reaparecendo rapidamente duas vezes e depois ficar totalmente visível.
Reproduza só uma vez, em vez de piscar sem parar, e não aplique para usuários que preferem movimento reduzido, pois piscadas rápidas podem incomodar.ABCDEF
Neon Glow Text
Também chamada Neon Sign Flicker, Glowing Text
O texto brilha como um tubo de neon e pisca ou pulsa.
Onde usar
Temas de vida noturna e games
Adicione um efeito "Neon Glow Text" (também chamado neon sign flicker ou glowing text) em [onde].
O texto deve brilhar como um tubo de neon, com uma luz suave e constante, e de vez em quando apagar por um instante como um letreiro de verdade.
Deixe a piscada ocasional em vez de rápida, porque flashes rápidos podem fazer mal a alguns usuários, e mantenha o brilho fixo se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Fade In / Fade Out
Também chamada Fade
O elemento passa de totalmente transparente a totalmente opaco no lugar, ou o contrário ao sair.
Onde usar
Modais, toasts e conteúdo de página surgindo
Adicione uma animação "Fade In / Fade Out" (também chamada fade) em [onde].
O elemento deve passar de totalmente transparente a totalmente visível no lugar ao aparecer, e sumir da mesma forma ao sair: suave, sem deslocamento nem mudança de escala.
Depois que ele sumir, garanta que não possa mais ser clicado nem alcançado pelo teclado, e troque na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).Mais em Entrance & Exit
A
O elemento dá uma volta completa no eixo Y enquanto se aproxima um pouco de quem vê e volta.
Onde usar
Revelação de um card ou badge chamando atenção
Adicione uma animação "Flip" em [onde].
O elemento deve dar uma volta completa no seu eixo vertical enquanto se aproxima um pouco de quem vê, e depois voltar com uma leve diminuição de tamanho: animado, mas breve.
Dê perspectiva para o giro parecer ter profundidade, reproduza só uma vez em vez de em loop, e pule o giro se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Flip In
Também chamada Flip In X, Flip In Y
O elemento gira em 3D no eixo horizontal ou vertical, de lado até ficar de frente para quem vê.
Onde usar
Revelação de cards e blocos
Adicione uma animação de entrada "Flip In" (também chamada flip in X ou flip in Y) em [onde].
O elemento deve começar de lado e girar no eixo horizontal até ficar de frente, passando um pouco do ponto e voltando antes de se acomodar: rápido, com uma pequena oscilação.
Dê perspectiva para o giro parecer ter profundidade, e mostre de frente sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Flip Out
Também chamada Flip Out X, Flip Out Y
O elemento gira em 3D até ficar de lado e invisível.
Onde usar
Remover cards e blocos
Adicione uma animação de saída "Flip Out" (também chamada flip out X ou flip out Y) em [onde].
O elemento deve se inclinar um pouco para trás e depois girar no eixo vertical até ficar de lado e sumir: rápido e preciso.
Dê perspectiva para o giro parecer ter profundidade, remova o elemento só depois que o giro terminar, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).