3 maneiras de corrigir quadros-chave se não estiver trabalhando no Firefox

Corrija sua animação de quadro-chave com estas etapas fáceis

Os usuários que experimentam a propriedade keyframes no Firefox relataram que seu código não produz resultados de animação, mas funciona no Chrome. Continue lendo para encontrar a solução para este problema.

As animações de quadro-chave são populares entre desenvolvedores e designers da Web devido à sua versatilidade. A regra de quadros-chave em CSS controla uma sequência de animação CSS usando estilos variáveis. Confira nossas recomendações de melhores navegadores que suportam quadros-chave e animações CSS.

Como a animação de quadro-chave funciona em CSS?

Os quadros-chave adicionam um elemento de animação usando estilos CSS. A animação é configurada cronometrando cada quadro-chave em uma sequência usando porcentagens. Um quadro-chave indica o ponto no tempo em que uma posição, opacidade ou áudio é usado.

Para criar uma alteração na animação, pelo menos dois quadros-chave precisam ser especificados para criar movimento. Um quadro-chave deve ser colocado para o valor no início da alteração e outro no final.

Como faço para corrigir quadros-chave se eles não estiverem funcionando no Firefox?

1. Verifique novamente o código

Isso pode parecer uma solução óbvia, mas às vezes um problema pode surgir de um erro tão simples quanto um espaço extra em algum lugar do código. Examine cuidadosamente o código para garantir que não haja erros de ortografia, valores ausentes ou adicionados, espaços extras, etc.

Leia mais sobre este tema

• Baixe e instale o Firefox Enterprise para Windows 10 e 11
• 3 maneiras de corrigir o erro do seu perfil do Firefox não pode ser carregado
• Como abrir os PDFs baixados do Firefox com o Edge PDF Reader
• 3 melhores temas dinâmicos do Firefox que você simplesmente precisa experimentar
• Firefox 77 oferece melhor desempenho do navegador para mais usuários

2. Definir a duração da animação

Se não houver uma duração de animação especificada, o elemento keyframes não reproduzirá a animação. Para definir uma duração, adicione uma regra de duração da animação com um valor definido de segundos na mesma seção que o nome da animação.

Se você quiser um loop contínuo da animação CSS, use a regra animation-iteration-count. Especifique o número de vezes que você deseja que a animação circule ou use um valor infinito.

3. Remover prefixos de fornecedores

Os prefixos do fornecedor fazem com que um navegador suporte novos recursos CSS antes que eles fiquem totalmente estáveis ​​em todos os navegadores. Como os quadros-chave em cascata agora são suportados no Firefox desde a versão 14, não há necessidade de ter o -moz- prefixo.

Felizmente, uma das soluções acima ajudou a corrigir o problema de quadros-chave que não funcionam no Firefox. Deixe-nos saber nos comentários qual solução funcionou para você ou se você tem uma sugestão para outra solução.