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


Так тоже все работает и ошибку не выдает. Как устранить ошибку при вставленном вебките, и почему без него работает без ошибок?
  • Вопрос задан
  • 847 просмотров
Решения вопроса 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;}

}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы