1

Пытаюсь сделать кнопку входа на сайт, при наведении курсора из-за края кнопки к центру медленно выезжает стрелка. Стрелка появляется, но без замедления сразу возникает на нужном месте. Помогите найти багу, уже всю голову сломал

#btn {
  position: relative; 
  border: 3px solid #f9ea70;
}
#btn:after{
  content: "\f178";
  font-family: FontAwesome;
  position: absolute;   
  display: none;
  right: -20px;
  transition: right 0.9s ease-in-out;    
}
#btn:hover:after {
  display: inline-block;
  right: 15px;
}

1 ответ 1

1

Свойство display - не анимируемое, отсюда и отсутствие анимации.

Вместо этого скрывайте вашу иконку с помощью opacity и visibility (при необходимости):

#btn {
  position: relative;
  border: 3px solid #f9ea70;
  overflow: hidden;
}

#btn:after {
  content: "\f178";
  font-family: FontAwesome;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  right: -20px;
  display: inline-block;
  transition: all 0.9s ease-in-out;
}

#btn:hover:after {
  right: 15px;
  opacity: 1;
  visibility: visible;
}
<div id="btn">BTN</div>

1
  • Спасибо, помогло)
    – stue
    28 сен 2017 в 20:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.