Как я могу сделать этот hover transition?

#css #css3 #html5 #css_animation

Я пытаюсь повторить этот transition с сайта uber.design:  



Дело в том, что я застрял в обратном transition:   



.un {
  display: inline-block;
}

.un:after {
  content: '';
  width: 0px;
  height: 2px;
  display: block;
  background: black;
  transition: 300ms;
}

.un:hover:after {
  width: 100%;
Underlined Text



    

Ответы

Ответ 1

Все хорошо, но лучше такое решать через before и after, есть возможность перемещать
объекты, навешивать анимации итп. Если сделать два псевдокласса то можно сделать так
как будто рамка растет вокруг и пропадает также.

Описание подходов решения (варианты не единственные это только примеры):
Вводное: Все объекты, а именно div и span преобразованы в inline-block, что позволит
встраивать их в любое место, без переноса строк, а также добавлены padding для отступов,
курсор ассоциируется в poiner и самое главное для этих примеров задано относительное
позиционирование position: relative 

Далее по отдельным примерам:


Добавляем блоку псевдоэлемент after который позволит создать далее варианты анимации
(1,2,3) этот объект позиционируется absolute слева внизу с шириной в 2px и длинной
на весь объект. После остается добавить только вариант анимации, для того чтобы анимация
была плавной используем transition задав время анимации в 300ms и отслеживая только
свойство transform которое и будет производить анимацию. Последним действием навешиваем
transform: scaleX(0) что уменьшит объект на 0 по оси абсцисс (X) для того чтобы анимация
была из угла в угол зададим трансформацию от правого нижнего угла(точнее им закончится)
transform-origin: right bottom. Последний шаг добавим действия при наведении мышки
на родителя, путем задания scaleX(1) и для того чтобы казалось что процесс идет с противоположного
угла пока мышка над родителем задается точка трансформирования нижний левый угол.
Пример тот же что и первый за исключением того что правый угол верхний склуглен и
задана высота 100%. Что позволило сделать эффект выползания и уползания червя )))
Третий пример повторяет второй, только не имеет скругления и позиционируется вверху.
Чуть более усложнен, добавлен еще один элемент before который анимируется уже по
вертикали. Что позволяет сделать рост их угла.
Это еще один вариант решения, в котором для выполнения анимации добавлены 4 элемента
span, данных элементов может быть и больше все зависит от задачи. Данные элементы прижаты
к краям поочередно, т.к. не задан transform-origin они растут изменяю размер относительно
своего центра.




div, span{
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: .5rem 1rem;
}
div::after{
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: red;
  transform: scaleX(0);
  transform-origin: right bottom;
  transition: transform 300ms;
}
div:hover::after{
  transform: scaleX(1);
  transform-origin: left bottom;
}

div.second::after{
  height: 100%;
  border-top-right-radius: 0;
  border-top-left-radius: 100%;
}
div.second:hover::after{
  transform: scale(1, 0.1);
  border-top-right-radius: 100%;
  border-top-left-radius: 0;
  transform-origin: left bottom;
}

div.third::after{
  transform-origin: right top;
  height: 100%;
}
div.third:hover::after{
  transform: scale(1, 0.1);
  transform-origin: left top;
}

span.four::after, span.four::before{
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: red;
  transform: scale(0, 1);
  transform-origin: right bottom;
  transition: transform 300ms;
}
span.four::before{
  width: 2px;
  height: 100%;
  transform: scale(1, 0);
  transform-origin: righ bottom;
  left: auto;
  right: 0;
}

span.four:hover::after, span.four:hover::before{
  transform: scale(1);
}

span.five span{
  transition: transform 300ms;
  background-color: red;
  position: absolute;
  padding: 0;
  display: block;
  transition: transform 300ms;
}

span.five span:nth-child(odd){
  width: 2px;
  height: 100%;
  bottom: 0;
  transform: scaleY(0);
}

span.five span:nth-child(even){
  width: 100%;
  height: 2px;
  bottom: 0;
  transform: scaleX(0);
}

span.five span:nth-child(1){
  left: 0;
}
span.five span:nth-child(2){
  left: 0;
}
span.five span:nth-child(3){
  right: 0;
}
span.five span:nth-child(4){
  right: 0;
  top: 0;
}

span.five:hover span{
  transform: scale(1, 1);
}
try me
try me2
try me3

квадрат

  квадрат
  
  
  
  



Ответ 2

Можно сделать бордер при помощи псевдоэлемента after, и изначально сделать его нулевой
ширины и прижать к правому краю right: 0, а при ховере уже left: 0 и изменять ширину
на 100%. Таким образом произойдет следующее:


при наведении бордер нулевой ширины прижмется влево и начнет плавно увеличиваться до 100%
при уведении курсора бордер вновь прижмется вправо и плавно уменьшится обратно до 0
соответственно, если поменять left и right местами, то эффект будет в обратную сторону




.un {
  display: inline-block;
  position: relative;
}

.un:after {
  content: '';
  position: absolute;
  width: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: black;
  transition: 300ms;
}

.un:hover:after {
  width: 100%;
  left: 0;
}
Underlined Text


Ответ 3

Вы можете использовать градиент и отрегулировать
background-position с задержкой, чтобы получить такой эффект:




.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000, #000);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}
Underlined Text





Если вам нужна непрерывная анимация при наведении, вы можете
попробовать это:    




.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000, #000);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
}

.un:hover {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}
Underlined Text




Для более подробной информации вы можете прочитать  ответ о том, как выполняется
вычисление другого значения:
https://stackoverflow.com/a/51734530/8620333