Блог

Главная - Вопросы по программированию - Мой: наведение, похоже, с чем-то конфликтует

Мой: наведение, похоже, с чем-то конфликтует

#html #css #animation #hover

#HTML #css #Анимация #наведение

Вопрос:

Здравствуйте (здесь багет на английском) итак, у меня есть логотип, который должен опускаться при наведении на него курсора, но он вообще не работает, и я не знаю, почему здесь мой код : 

 .facebook{
  left: 0%;
  top:-10%;
  animation-name: logofb;
  animation-duration: 0.5s;
  animation-delay: 7.5s;
  animation-fill-mode: forwards;
  transition-property: top;
  transition-duration: 0.5s;
}

@keyframes logofb  {
  from {top:-10%;}
  to {top: 0%;}
}

.facebook:hover {
  top: 50px;

}  
 <span class="facebook reslogo"><img src=facebook.png height="13%" width="13%"></span>


.reslogo  {
  position: fixed;
  z-index: 200;
  top: 0px;
}

Проблема может заключаться в том, что у него уже есть анимация, которая происходила раньше

Комментарии:

1. Есть ли причина, по которой вы делаете это с ключевыми кадрами вместо преобразования?

2. я не знаю, я просто следую руководству в Интернете

Ответ №1:

У вас есть сочетание единиц измерения, и процесс позиционирования может быть упрощен. Вы можете легко добиться этого с помощью transform:translateY() :

 .facebook {
  display:block;
  transform:translateY(-10%);
  transition:transform .5s ease;
}

.facebook:hover {
  transform:translateY(0);
}  
 <span class="facebook"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" height="13%" width="13%"></span>