3

Estou recebendo erro no código abaixo que diz

css - always define standard rule 'keyframe' when defining keyframe Error

Ele é executado normalmente no Chrome, mas não está funcionando no IE 11

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

1 Resposta 1

2

Seu problema é que vc está declarando a animação apenas para o vendor prefix -webkit- que o Chrome entende mais o IE não.

Animação funcionando no IE11

inserir a descrição da imagem aqui

Para corrigis basta vc adicionar o mesmo CSS porém sem o prefixo @keyframes fadeIn {}

Veja que vai funcionar ai agora sem erro, esse é o código referente a imagem acima

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: fadeIn 1s linear infinite;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

    
<div class="box"></div>


Dica

Nessa pergunta tem detalhes que vão te interessar É necessário adicionar prefixos em algumas propriedades do CSS?

3
  • Correto. Basta remover a definição do motor webkit que funcionou. Thank You! Commented 11/12/2018 às 12:02
  • @RafaelPatriciodaCruz na verdade se vc quiser garantir que os browsers mais antigos vão reconhecer a propriedade seria interessante manter os dois @-webkit-keyframes fadeIn { } e @-webkit-keyframes fadeIn { } e se vc quiser ir além ainda pode se resguardar para o FireFox antigo usando @-moz-keyframes fadeIn { } (moz = mozilla)
    – hugocsl
    Commented 11/12/2018 às 12:04
  • 1
    Verdade. Super importante abordar outros navegadores para mitigar possíveis falhas de compatibilidade ;) Commented 11/12/2018 às 12:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .