Animate an ::after line from 0 width to 100% width from left to right

Question

Trying to grow a pseudo-element line from left to right to full width of it's container then shrinking it from right to left to zero width. Side note: in JavaScript I'm adding the "underlined-animated"-class after a timeout.

I've tried fiddling around with some keyframes.

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;}
}

I'm expecting the line to grow from left to the right – to 100% width of it's container – and then expecting it to shrink from right to left – to 0% width of it's container – all in one animation.

The result of the above code is just a weirdly growing and shrinking line.

by the way here an easier idea to do the same: https://stackoverflow.com/a/54616200/8620333 — Temani Afif, Jun 28 '19 at 13:58

Ori Drori · Accepted Answer · 2019-06-28T14:01:27.057

1

Instead of animating the width, animate the right up to the 50% keyframe, and the left from the 50% keyframe to the end:

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>

edited Jun 28 '19 at 14:01

answered Jun 28 '19 at 13:57

Ori Drori

183,571
29
224
209

2

the left/right is needed because : *then expecting it to shrink from right to left* – Temani Afif Jun 28 '19 at 13:59
1

Hey! Thank you very much for your input! I think my question wasn't phrased properly. I'm trying to achieve that as soon as the line is at 100%, it should shrink to 0%, but shrink from left to right. With the input you gave, it's growing and shrinking, but only from the left. – Jun 28 '19 at 13:59
Oh, that's very smart! Thank you, Ori Drori! Have a nice day or night (wherever you come from). – Jun 28 '19 at 14:10

Animate an ::after line from 0 width to 100% width from left to right

1 Answers1