Always define standard Rule '@keyframes' when Defining keyframes

Asked

Viewed 127 times

-2

I have a css with the following animation:

@-webkit-keyframes bounce {
    0%, 20%, 60%, 100%  { -ms-transform: translateY(0); }
    0%, 20%, 60%, 100%  { -o-transform: translateY(0); }
    0%, 20%, 60%, 100%  { -moz-transform: translateY(0); }
    0%, 20%, 60%, 100%  { -webkit-transform: translateY(0); }
    40%  { -webkit-transform: translateY(-20px); }
    80% { -webkit-transform: translateY(-10px); }
}

But VS Code leaves an error message:

Always define standard Rule '@keyframes' when Defining keyframes.

I can’t fix it. Someone knows and could help me with it please?

css css3
  • 1

    You defined as @-webkit-keyframes, he’s complaining about it, he tries to put it alone @keyframes

1 answer

3

You stated wrong, you used a lot of vendor prefix all within the -webkit- that can’t... you have to declare separately!

That’s wrong

inserir a descrição da imagem aqui

The correct way would be like this, see that there is no error warning!

inserir a descrição da imagem aqui

@-ms-keyframes bounce {
    0%, 20%, 60%, 100%  { -ms-transform: translateY(0); }
    40%  { -ms-transform: translateY(-20px); }
    80% { -ms-transform: translateY(-10px); }
}
@-o-keyframes bounce {
    0%, 20%, 60%, 100%  { -o-transform: translateY(0); }
    40%  { -o-transform: translateY(-20px); }
    80% { -o-transform: translateY(-10px); }
}
@-webkit-keyframes bounce {
    0%, 20%, 60%, 100%  { -webkit-transform: translateY(0); }
    40%  { -webkit-transform: translateY(-20px); }
    80% { -webkit-transform: translateY(-10px); }
}
@-moz-keyframes bounce {
    0%, 20%, 60%, 100%  { -moz-transform: translateY(0); }
    40%  { -moz-transform: translateY(-20px); }
    80% { -moz-transform: translateY(-10px); }
}
@keyframes bounce {
    0%, 20%, 60%, 100%  { transform: translateY(0); }
    40%  { transform: translateY(-20px); }
    80% { transform: translateY(-10px); }
}

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.