Связать масштаб анимации справа - PullRequest
Новая
       18

Связать масштаб анимации справа

0 голосов
/ 31 декабря 2018

У меня есть ссылка (тег "a") в моем документе CSS, и у меня есть анимация, которая масштабирует нижнюю границу от центра к обоим концам ссылки.Я хочу, чтобы анимация масштабировалась с левой стороны и растягивалась вправо

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

a:link:after
{
    content: "";
    display: block;
    border-bottom: 2px solid white;
    transform: scaleX(0);
    transition: transform .2s ease-out;
}
a:hover:after
{
    transform: scaleX(1);
}

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

1 Ответ

0 голосов
/ 31 декабря 2018

Вы можете использовать свойство translate в сочетании с scale.

a {
  font-size: 24px;
  text-decoration: none;
  position: relative;
  color: black;
  overflow: hidden;
  display: inline-block;
}

a:after {
  content: "";
  background: black;
  height: 2px;
  transform: translate3d(-100%, 0, 0) scale(0);
  transition: transform .2s ease-out;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

a:hover:after {
  transform: translate3d(0, 0, 0) scale(1);
}
<a href="">LINK</a>
...