Karam and error code. Why produces an error?

Learn html, do a video tutorial website. The author began the animation to do and there was a small plugging.
The original code looks like the following:
@-webkit-keyframes jump {
 0% { top: 0; }
 100% { top: 40px;}
}

.rek img:hover {
 -webkit-animation: jump 1s; }


In such a case, the animation works but in the editor there are two errors "Always define standard rule '@keyframes' when defining keyframes." and "Also define the standard property 'animation' for compatibility". Again, the code works.

S-animation: jump I can solve the error, googling I realized that I need to add another without vebkita, i.e., the code goes

.rek img:hover {
 -webkit-animation: jump 1s;
 animation: jump 1s; }

But the first error can not win. In the end I removed WebKit did

.rek img:hover {
 animation: jump 1s;
}

@keyframes jump {
 0% { top: 0; }
 100% { top: 40px;}

}


So, too, everything works and no errors reported. How to fix the error when inserted webcite, and why without it working without errors?
April 3rd 20 at 18:31
1 answer
April 3rd 20 at 18:33
Solution
https://autoprefixer.github.io/ru/
.rek img:hover {
-webkit-animation: jump 1s;
 animation: jump 1s;
}

@-webkit-keyframes jump {
0% { top: 0; }
100% { top: 40px;}

}

@keyframes jump {
0% { top: 0; }
100% { top: 40px;}

}

Find more questions by tags CSS