Animação CSS vs Transição: Keyframes Explicados

Cada desenvolvedor copiou um bloco de @keyframes de uma resposta Stack Overflow, colou-o, atualizou e encontrou o elemento perfeitamente imóvel Nove vezes em cada dez o motivo é chato: o nome da animação no @keyframes regra não correspondia ao nome no animation taquigrafia, ou a duração foi deixada em zero, ou a classe nunca pousou no elemento A outra razão é que a animação de quadro-chave é um daqueles cantos do CSS onde você não pode julgar o resultado lendo o código Uma sequência de porcentagens e transformações não lhe diz nada sobre se o movimento parece suave, rápido ou enjoado até que você o veja correr.

Uma animação CSS é o navegador & #39; s mecanismo para mover um elemento através de uma sequência nomeada de estilos ao longo do tempo Ao contrário de uma transição, que anima uma única mudança e espera por um gatilho, uma animação segue um @keyframes script com quantas etapas você quiser, pode fazer um loop para sempre e começa sozinho no momento em que é aplicado É o que alimenta o carregamento de spinners, pulsos de atenção, efeitos de entrada e cada bit de movimento ambiente que faz uma interface parecer viva Mas as duas metades, os quadros-chave e a taquigrafia, têm que concordar exatamente, e a taquigrafia embala sete ou oito valores em uma linha em uma ordem que a maioria das pessoas nunca memoriza.

o Gerador Animação CSS remove a adivinhação Você escolhe um movimento de uma biblioteca de predefinições, ajusta a duração, flexibilização, atraso, contagem e direção de iteração e assiste-o reproduzir em um elemento de visualização ao vivo A ferramenta escreve ambos @keyframes regra e a correspondência animation abreviar para uma caixa pronta para cópia, com os nomes já sincronizados, para que o bloco que você colar funcione pela primeira vez.

tl;dr: Uma animação CSS move um elemento através de a @keyframes sequência ao longo do tempo, e ao contrário de uma transição não precisa de gatilho e pode loop. O @keyframes nome e o animation-name deve corresponder exatamente, que é a única razão mais comum que uma animação não faz nada A abreviação carrega nome, duração, temporização-função, atraso, iteração-contagem, direção e preenchimento-modo Preferindo animar transform e opacity para um movimento suave e composto Este gerador dá-lhe catorze predefinições, controlo de reprodução total e uma antevisão ao vivo, e emite tanto os quadros-chave como a abreviação em conjunto, Ele é executado inteiramente no seu navegador sem inscrição.

Que problema resolve um gerador de animação CSS?

A coisa estranha sobre a animação de quadros-chave é a viagem de ida e volta Para sintonizar um salto à mão você escreve o @keyframes regra, escreva o animation linha, salvar o arquivo, mudar para o navegador, esperar a recarga, e assistir Se o salto é muito agressivo você muda um translateY valorize e faça o loop inteiro novamente Como esse ciclo é lento, a maioria das pessoas aceita a primeira versão que não parece quebrada, em vez da versão que parece certa, e a diferença entre essas duas é exatamente o polimento que separa uma interface considerada de um modelo.

Um gerador colapsa esse loop em um único clique Você escolhe uma predefinição, arrasta o controle deslizante de duração e o elemento de visualização reproduz o movimento na sua frente imediatamente Alterne a função de temporização de ease para uma curva mais bezier e a mudança na sensação é instantânea Defina a contagem de iterações para infinita e os loops de animação para que você possa estudá-la Depois de alguns minutos disso você constrói uma intuição para o que seiscentos milissegundos parece contra mil e duzentos, que é o sentido que você precisa para tomar boas decisões de movimento em qualquer outro lugar.

Há um argumento de correção também Você não pode produzir um malformado animation valor escolhendo entre menus e arrastando controles deslizantes, e você não pode digitar incorretamente o nome do quadro-chave, porque a ferramenta liga a abreviação aos quadros-chave que gerou A saída é sempre segura para colar Essa confiabilidade é a mesma razão pela qual mantenho os construtores visuais de CSS próximos para outras propriedades, o mesmo instinto por trás de alcançar o gerador gradiente em vez de contar, a cor para na minha cabeça, ou no gerador caixa-sombra em vez de adivinhar os raios de desfoque.

Como uma animação CSS é diferente de uma transição CSS?

Isso faz as pessoas subirem constantemente, por isso vale a pena ser preciso Uma transição anima uma única propriedade entre dois estados e requer algo para mudar, um hover, um foco, uma classe alternada, antes de ser executada Tem um valor inicial e um valor final e nada entre uma animação, por contraste, segue a @keyframes regra que pode definir qualquer número de passos intermediários, para que o elemento possa se mover através de toda uma coreografia em vez de uma linha reta de A a B. Também não espera por nada: aplique-o e ele toca.

A consequência prática é que você alcança uma transição quando você quer suavizar uma mudança de estado, e para uma animação quando você quer movimento que é intrínseco ao elemento Um botão que escurece no hover é uma transição Um spinner que gira para sempre, um crachá que pulsa para desenhar o olho, ou um cartão que desliza para cima como a página carrega são todas animações, porque o movimento acontece por conta própria e muitas vezes repete Se você ainda está decidindo qual um determinado efeito precisa, a regra de ouro é simples: se uma ação do usuário inicia-lo e ele vai de uma maneira, use uma transição; se ele joga por si só, loops, ou tem mais de duas etapas, use uma animação O Gerador transição CSS é a ferramenta complementar para o primeiro caso, e os dois cobrem a maior parte do movimento que você escreverá.

Aspecto	Transição	Animação
Acionador	Precisa de uma mudança de estado (hover, foco, classe)	Começa por conta própria quando aplicado
Passos	Dois, um começo e um fim	Qualquer número, via @keyframes
Looping	Não, é executado uma vez por mudança	Sim, com iteration-count
Uso típico	Efeitos de pairar e focar	Fiadores, pulsos, entradas

Qual é a ordem correta da abreviação da animação?

o animation a abreviação é densa Ele pode carregar o nome do quadro-chave, duração, função de temporização, atraso, contagem de iteração, direção, modo de preenchimento e estado de reprodução, tudo em uma linha, e a ordem importa para os dois valores de tempo exatamente da maneira que faz para transições Este gerador escreve o nome primeiro, depois duração e função de temporização, depois o atraso opcional, depois iteração-contagem, direção e modo de preenchimento, por exemplo animation: fadeIn 0.6s ease 1 both. Escrever o nome primeiro é legal porque os nomes dos quadros-chave não são palavras-chave CSS e é lido com mais clareza do que enterrar o nome no final.

A única regra que pega todos são os dois valores de tempo A duração e o atraso são ambas as vezes, e CSS diz-lhes separados apenas por posição: o primeiro valor de tempo é a duração e o segundo é o atraso Tudo o mais na abreviação é uma palavra-chave ou um número sem unidade, por isso não pode ser confundido com um tempo É por isso que a ferramenta pode seguramente soltar o atraso quando é zero, porque um unitless 1 ou a palavra infinite isso segue é inconfundivelmente a contagem de iteração, não uma segunda vez O gerador também omite qualquer valor que seja igual ao seu padrão CSS, então a normal direção ou a none fill-mode nunca embreagem a saída O resultado é uma abreviação que lê a maneira que você iria escrevê-lo à mão, uma vez que você sabia as regras.

Por que minha animação CSS não está sendo reproduzida?

Este é o penhasco, e quase todo mundo sai dele pelo menos uma vez A única causa mais comum é uma incompatibilidade entre o animation-name e o nome no @keyframes regra. Um erro de digitação, uma diferença de capitalização ou um nome que foi renomeado em um lugar e não no outro deixa o navegador sem nenhuma regra de quadro-chave para se ligar, então ele silenciosamente não faz nada Não há erro e nenhum aviso; o elemento simplesmente fica lá Porque este gerador escreve ambas as metades juntas a partir do mesmo nome, toda essa classe de bug desaparece, o que é uma grande parte do ponto.

As outras causas valem a pena conhecer porque elas aparecem quando você escreve animações à mão Uma duração de zero significa que a animação é concluída instantaneamente e você nunca a vê Um elemento que é display: none não executa suas animações em tudo, então um fade-in que depende do elemento que está sendo renderizado não vai disparar Uma propriedade ausente ou com erros ortográficos dentro de um quadro-chave é silenciosamente ignorado em vez de sinalizado E uma animação com animation-fill-mode: none, o padrão, encaixa o elemento de volta aos seus estilos não-unados no instante em que termina, o que pode parecer que nunca correu se o movimento foi sutil Assistir a animação em uma visualização ao vivo surge a maioria destes em segundos, que é o caso para construir movimento onde você pode vê-lo em vez de em um arquivo que você continua recarregando.

O que faz o modo de preenchimento de animação?

O modo de preenchimento é a configuração que as pessoas entendem por último e mais precisam. Ele decide quais estilos o elemento mostra fora da janela ativa do animation' s, tanto antes de começar durante qualquer atraso quanto depois de terminar. O padrão, none, significa que o elemento ignora o primeiro e o último quadros-chave quando a animação não está em execução, então ele fica em seus estilos normais antes da animação e volta para eles depois. Esse snap-back é a fonte de uma frustração muito comum: você anima um elemento para desaparecer, ele desaparece lindamente e desaparece novamente no momento em que a animação termina, porque com none a final opacity: 1 keyframe é descartado assim que a animação termina.

A correção é animation-fill-mode: forwards, que mantém o último quadro-chave aplicado após o término da animação, para que o elemento desbotado permaneça visível. backwards aplica o primeiro quadro-chave durante qualquer atraso antes do início da animação, o que é útil quando você tem um atraso e não quer que o elemento pisque primeiro em seu estado padrão. both faz as duas coisas ao mesmo tempo e é a escolha geral mais segura para animações de entrada, e é por isso que este gerador padroniza novas animações both. Compreender o modo de preenchimento é a diferença entre uma entrada que cai e uma que se desfaz, e é muito mais fácil de entender alternando-a em uma visualização e observando a mudança final do que lendo a especificação fria.

Quando uma animação deve fazer um loop e como posso controlá-la?

A contagem de iterações decide quantas vezes a animação é executada Defina-a para um número inteiro positivo e a animação repete isso muitas vezes e depois para; defina-a como infinite e faz um loop para sempre As animações em loop são a escolha certa para o ambiente, o movimento contínuo, um spinner que mostra o trabalho está acontecendo, um pulso que mantém vivo um call-to-action, um flutuador sutil que dá alguma vida a uma imagem de herói As animações de um tiro, executadas uma vez, são para entradas e saídas, onde o movimento tem um começo e um fim claros e repeti-lo seria uma distração.

Pares de direção com contagem de iteração para moldar como cada passagem é executada. O padrão normal reproduz todas as iterações do primeiro ao último quadro-chave. reverse joga cada um para trás. alternate executa a primeira passagem para frente e a próxima para trás, ping-ponging entre os pontos finais, que é como você constrói um pulso suave de ida e volta sem definir uma viagem de retorno nos quadros-chave. alternate-reverse começa para trás e alterna a partir daí O gerador expõe todos os quatro para que você possa sentir a diferença: um pulso com alternate inspira e expira naturalmente, enquanto os mesmos quadros-chave com normal e um número par de passos tem que codificar o retorno por si mesmos Para o movimento de looping, alternate quase sempre produz o resultado mais orgânico com menos trabalho de quadro-chave.

Quais propriedades devo animar para um desempenho suave?

As propriedades que você anima decidem se o movimento é executado em um suave sessenta quadros por segundo ou gagueja, ea escolha é a mesma que para transições Prefira transform e opacity. Ambos podem ser entregues ao compositor e animados sem que o navegador recalcule o layout da página, para que permaneçam suaves mesmo em hardware modesto e sob carga. É por isso que um cartão desliza para cima transform: translateY parece fácil enquanto o mesmo cartão é animado top ou margin-top parece difícil. Cada predefinição de entrada neste gerador é construída transform e opacity Por exatamente esse motivo.

As propriedades para evitar animar em uma sequência de quadros-chave são as que acionam o layout: width, height, top, left, margin e padding. Alterar qualquer um destes força o navegador a recalcular a geometria do elemento e tudo ao seu redor em cada quadro, o que é caro e é a causa mais comum de animação janky, agravada quando a animação faz um loop e paga esse custo continuamente Se você quiser que um elemento cresça, a transform: scale é quase sempre mais barato que animar width e height, e parece quase idêntico O argumento mais amplo para montar um conjunto de ferramentas que orientam você em direção ao caminho barato está no Kit de ferramentas para desenvolvedores web piece, e os hábitos de fluxo de trabalho que tornam o movimento uma decisão rápida em vez de lenta estão no Ferramentas de produtividade do desenvolve guia.

Como o gerador mantém a visualização honesta?

Todo construtor visual arrisca a visualização e o código exportado se afastando até que a ferramenta ensine um valor que não será reproduzido Este gerador injeta o exato @keyframes regra que ele envia para a página e aplica o exato animation abreviação mostra para o elemento de visualização, então o movimento que você assiste é o movimento que seu CSS copiado produzirá Não há caminho de animação separado que possa discordar, e o nome do quadro-chave na visualização é o nome na saída.

Como uma animação é executada na montagem e depois termina, a visualização precisa de uma maneira de reproduzi-la, que a ferramenta lida remontando o elemento de visualização quando você pressiona replay Isso espelha como uma animação one-shot se comporta na produção, onde ela é reproduzida quando o elemento aparece e, em seguida, mantém seu estado final de acordo com o modo de preenchimento A saída também permanece mínima, deixando cair o atraso zero e qualquer valor padrão para que você copie apenas declarações significativas, a mesma disciplina de emitir nada redundante que seja executado através do Gerador filtro CSS e os outros construtores visuais Quando você emparelhar uma animação de quadro-chave com um layout que posiciona o elemento, o gerador flexbox é um companheiro natural para a construção da estrutura envolvente.

Quais navegadores suportam animações CSS?

As animações CSS são suportadas em todos os navegadores atuais e já existem há mais de uma década. O @keyframes regra, o animation taquigrafia e todas as suas manoplas são universais e sem prefixo, então a saída deste gerador funciona no Chrome, Firefox, Safari e Edge sem prefixos de fornecedor ou fallbacks A referência definitiva é a especificação CSS Animations Nível 1 do W3 C, que é a fonte primária de como cada parte da taquigrafia se comporta, e vale a pena ler uma vez que o gerador lhe deu uma sensação física do que as peças fazem Para acessibilidade, lembre-se que alguns usuários definem um prefers-reduced-motion preferência, e é uma boa prática envolver animação em loop não essencial em uma consulta de mídia que a respeite, para que o movimento ambiente possa ser desligado para pessoas que o acham desconfortável.

Se você estiver montando um conjunto mais amplo de ferramentas visuais CSS, o gerador de transição e o Gerador de transformação CSS sente-se naturalmente ao lado deste, uma vez que as transformações são a matéria-prima a maioria dessas animações se move e transições lidar com as mudanças de estado animações não. Tudo aqui é executado no lado do cliente, e o CSS que você copia é seu para usar sem tempo de execução, sem etapa de construção e sem dependência.

Perguntas frequentes

O que é um gerador de animação CSS?

Um gerador de animação CSS é uma ferramenta visual que constrói uma animação de quadro-chave a partir de configurações que você escolher Você escolher uma predefinição, definir a duração, flexibilização, atraso, contagem de iteração e direção, e ele gera o @keyframes regra e o animation abreviação junto com uma visualização ao vivo você pode reproduzir.

Qual é a diferença entre uma animação CSS e uma transição CSS?

Uma transição anima uma única mudança entre dois estados e precisa de um gatilho, como hover para executar Uma animação segue a @keyframes sequência com qualquer número de etapas, pode fazer um loop e começa por conta própria assim que é aplicado, sem esperar por uma mudança de estado.

Que ordem a abreviação da animação usa?

Esta ferramenta escreve o nome do quadro-chave primeiro, depois duração, função de temporização, atraso, iteração-contagem, direção e modo de preenchimento, por exemplo animação: fadeIn 0.6 s facilidade 1 ambos O primeiro valor de tempo é sempre a duração eo segundo é o atraso, então um único valor de tempo é lido como a duração.

Como faço um loop de animação CSS para sempre?

Defina a contagem de iterações para infinita Na abreviação que é a palavra infinita, como na animação: spin 1 s linear infinito Qualquer número inteiro positivo em vez disso repete a animação que muitas vezes e depois pára de acordo com o modo de preenchimento e direção.

Por que minha animação CSS não está sendo reproduzida?

A causa mais comum é uma incompatibilidade entre o nome da animação e o nome @keyframes, incluindo um erro de digitação ou uma diferença de caso, o que deixa o navegador sem nenhuma regra para vincular. Verifique também se a duração está acima de zero e se o elemento está renderizado, já que uma animação em um display: nenhum elemento não é executado.

O que faz a propriedade animation-fill-mode?

O modo de preenchimento decide quais estilos o elemento mostra antes da animação começar e depois que ela terminar O padrão nenhum encaixa o elemento de volta aos seus estilos normais quando a animação termina A definição de forwards mantém o quadro-chave final, backward aplica o primeiro quadro-chave durante um atraso, e ambos fazem as duas coisas.

Quais propriedades devo animar para um desempenho suave?

Prefira transformação e opacidade O navegador pode animá-los no compositor sem recalcular o layout, para que eles permaneçam suaves a 60 fps A animação de largura, altura, topo, esquerda ou margem força um recálculo do layout em cada quadro, que é a razão usual pela qual uma animação gagueja.

O CSS de animação gerado é gratuito e seguro de usar?

Sim. a ferramenta é totalmente gratuita sem limites de inscrição ou uso, e emite CSS padrão e sem prefixo suportado em todos os navegadores modernos Todo o processamento acontece no seu navegador, então nada é carregado e a ferramenta funciona offline depois de carregada.