Кейфрэйм и ошибка кода. Почему выдает ошибку?

Question

[cupacabka]

Осваивают html, делаю по видео туториалу сайт. Автор начал анимацию делать и появился небольшой затык.
В оригинале код выглядит следующим образом:

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

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

В подобном случае анимация работает, но в редакторе появляется две ошибки "Always define standard rule '@keyframes' when defining keyframes." и "Also define the standard property 'animation' for compatibility". Повторюсь, что сам код при этом работает.

С -animation: jump я еще могу решить ошибку, погуглив я понял, что надо еще дописывать без вебкита, то есть код выходит

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

Но первую ошибку победить не могу. В итоге убрал вебкит и сделал

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

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

Так тоже все работает и ошибку не выдает. Как устранить ошибку при вставленном вебките, и почему без него работает без ошибок?

Comments

[Ankhena]

Вы бы еще писали что за редактор.
Собственно, он вам говорит, что должны быть заданы правила без префиксов.

почему без него работает без ошибок

Потому что браузер в котором вы смотрите, понимает эти свойства без префикса.

[cupacabka]

Ankhena, редактор vs code. Спасибо за ответ.

Answer 1

[tyzberd]

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;}

}