Анимировать строку an :: after от 0 до 100% ширины слева направо - PullRequest
Новая
       28

Анимировать строку an :: after от 0 до 100% ширины слева направо

1 голос
/ 28 июня 2019

Попытка увеличить линию псевдоэлемента слева направо до полной ширины контейнера, а затем уменьшить ее справа налево до нулевой ширины. Примечание: в JavaScript я добавляю «подчеркнутый-анимированный» класс по истечении времени ожидания.

Я пытался поиграться с некоторыми ключевыми кадрами. 

em::after {
    content: "";
    height: 1px;
    width: 0;
    display: inline-block;
    position: absolute;
    left: 0;
    background: green;
    transition: all;
}

.underlined-animated::after {
    animation: underline-animated 5s forwards;
}

@keyframes underline-animated {
    0%   {width: 0;}
    50%  {width: 100%; left: initial; right:0;}
    100% {width: 0;}
}

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

Результатом вышеприведенного кода является просто странно растущая и сужающаяся линия.

1 Ответ

1 голос
/ 28 июня 2019

Вместо анимации width, анимируйте right до ключевого кадра 50% и left от ключевого кадра 50% до конца: 

em::after {
  content: "";
  height: 1px;
  display: inline-block;
  position: absolute;
  left: 0;
  background: green;
  transition: all;
}

.underlined-animated::after {
  animation: underline-animated 5s forwards;
}

@keyframes underline-animated {
  0% {
    right: 100%;
  }
  50% {
    right: 0;
    left: 0;
  }
  100% {
    right: 0;
    left: 100%;
  }
}
<em class="underlined-animated">I'm the text</em>
...