Как сделать работу перехода CSS "назад"?

Итак, у меня есть этот переход при наведении, который создает границу внизу элемента, который зависнет. Все хорошо там, но когда мышь покидает элемент, граница просто исчезает, а я хочу, чтобы она снова "отводила" назад. Codepen

HTML:

<div class="object">

<p>Object</p>

</div>

CSS

* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}

p {
 width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}

p:hover {
  border-bottom: 5px solid white;
}

Как мне сделать это, как можно проще? Спасибо, 3

Ответы

Ответ 1

Переходы работают в обоих направлениях автоматически.

Проблема, с которой вы столкнулись, заключается в том, что border-style не является атрибутом, который может быть анимирован, поэтому он мгновенно изменяется.

Это означает, что когда вы его наводите, он становится solid мгновенно, а затем тратит время на 5px.

Но когда вы его открываете, он становится none мгновенно, и вы не можете видеть анимацию ширины.

Сделать состояние по умолчанию (не зависающее) явным, чтобы border-width - это единственное, что меняется при его зависании.

Добавить

border-bottom: 0px solid white;

к правилам для p.

Ответ 2

Добавьте border-bottom: 0px solid white в p. Css хочет знать, куда вернуться!: D

Ответ 3

Я не знаю, может ли это помочь, но в моем случае я просто сделал так:

Над:

.<nameOfClass>:hover{
 transition: width 0.4s ease-in-out;
}

Не более:

.<nameOfClass>:not(:hover){
 transition: width 0.4s ease-in-out;
}

Ответ 4

для перехода добавьте анимированный класс к элементу, который вы хотите перевести

.animate 
 { 
  transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
 }

Теперь, когда вы добавляете этот класс в свой элемент, он будет совершать переход как при наведении, так и при наведении.