Блог

У меня есть:

 #t {
  background: bisque;
  display:block;
  width: 200px;
  height: 100px;
  transition:0.5s;
}
#t:hover {
  border-bottom: 3px solid grey;
}  

 <div id="t"></div>  

Как вы можете видеть при наведении курсора — transition эффект начинает «отставать», вероятно, потому, что я добавляю border-bottom в качестве эффекта наведения, который не подходит (?), Но не уверен.

Как я мог бы избежать такого «запаздывания» и добавить transition: 0.5s; для border-bottom внешнего вида?

Это потому, что размеры границ могут быть определены и «пошагово пройдены» только в целых значениях, поэтому у вас не может быть субпиксельных границ, что вызывает эффект отрывистости. Решением будет просто отобразить псевдоэлемент высотой 3 пикселя, но преобразовать его так, чтобы он начинался с scaleY(0) , и при наведении развернуть его на полную высоту с помощью scaleY(1) .

Чтобы создать впечатление, что масштабирование начинается с верхнего края псевдоэлемента, вам также нужно будет использовать transform-origin: top center .

Смотрите доказательство концепции:

 #t {
  background: bisque;
  display:block;
  width: 200px;
  height: 100px;
  position: relative;
}
#t::before {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 3px;
  background-color: grey;
  content: '';
  transform: scaleY(0);
  transform-origin: top center;
  transition: 0.5s;
}
#t:hover::before {
  transform: scaleY(1);
}  

 <div id="t"></div>  

Вы также можете имитировать нижнюю границу с помощью box-shadow.

 #t {
    display: block;
    background: bisque;
    position: relative;
    width: 200px;
    height: 100px;
    transition: box-shadow 0.5s linear;
  }  

  #t:hover {
    box-shadow: 0 3px 0 0 grey;
  }
    

 <div id="t"></div>  

Благодаря CSS-хитростям о анимации границы

Вы можете оставить границу прозрачного цвета и при наведении просто изменить ее на видимый цвет, который должен быть более плавным