Css: проблема перехода границы снизу

Question

Я попробовал CSS анимацию, чтобы переместить border-bottom сверху вниз при наведении курсора.Но когда я помещаю курсор на нижний край границы, он начинает мерцать, и курсор, а также граница непрерывно изменяются.

Здесь JSFIDDLE

div {
  border-bottom: 1px solid;
  display: inline;
  padding-bottom: 5px;
  transition: padding-bottom .5s;
}

div:hover {
  padding-bottom: 2px;
  cursor: pointer;
  transition: padding-bottom .5s;
}

<div>
  Hello world
</div>

Есть ли способ остановить проблему мерцания или любой другой способ получить тот же эффект анимации.

Answer 1

Я считаю, что проблема в том, что при попытке переместить 3px длительность .5s слишком велика.

В этом примере вы можете видеть, что таймер .2s более плавный для вашего варианта 3px и что .5sТаймер также плавный при переходе больше пикселей

div {
  border-bottom: 1px solid;
  display: inline;
}

div:hover {
  padding-bottom: 2px;
  cursor: pointer;
}

.div1 {
  padding-bottom: 5px;
  transition: padding-bottom .2s;
}

.div2 {
  padding-bottom: 15px;
  transition: padding-bottom .5s;
}

<div class="div1">
  Hello world 1
</div>
<br/><br/><br/>
<div class="div2">
  Hello world 2
</div>

Answer 2

Используйте другой элемент, задайте внешнему элементу фиксированную высоту и уменьшите размер внутреннего элемента при наведении.Я добавил цвета фона, чтобы показать, что происходит:

div{
  display: inline-block;
  cursor: pointer;
  height: 28px; /* lineheight+border+padding */
  background: red;
}

div >span{
  border-bottom: 1px solid;
  display: inline-block;
  padding-bottom: 5px;
  transition: padding-bottom .5s;
  line-height: 22px;
  background: yellow;
}

div:hover span{
  padding-bottom: 2px;
  transition: padding-bottom .5s;
}

<div>
  <span>Hello World</span>
</div>

Answer 3

Попробуйте использовать элемент pseudo :: after вместо границы.

Fiddle здесь: https://jsfiddle.net/L9huwv1f/

div {
  display: inline;
  padding-bottom: 5px;
  position: relative
}

div:hover {
  cursor: pointer;
}
div::after {
  content:'';
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  bottom:0;
  display: block;
  background-color: black;
  transition: transform 0.3s ease-in-out;
}
div:hover::after {
  transform: translateY(-3px);
}

Answer 4

Это работает:

div span {
  border-bottom: 1px solid;
  cursor: pointer;
  display: inline;
  padding-bottom: 5px;
  transition: padding-bottom .5s;
}

div span:hover {
  padding-bottom: 2px;
}