How to animate after element with css?

Question

This is a simple line that should be drawn from left to right.

.row { height: 100px; width: 300px; background-color: #555556; } .row::before { background-color: #63ffd1; display: block; content: ''; height: 2px; width: 90%; position: absolute; margin-top: 110px }

 <div class="row">

Daniel daniel 3,201 3 17 · Accepted Answer · 2018-02-15T13:31:25

As an option:

 .row { height: 100px; width: 300px; background-color: #555556; } .row::before { background-color: #63ffd1; display: block; content: ''; height: 2px; width: 90%; position: absolute; margin-top: 110px -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */ animation: mymove 5s infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes mymove { from {width: 0px;} to {width: 200px;} } @keyframes mymove { from {width: 0px;} to {width: 200px;} }

 <div class="row">

So that it cannot be seen until the animation delay has passed the animation delay.
And it turns out that the entire delay is visible, and then the animation disappears and passes.
@ Vladimir Kravchenko found the solution themselves, - very well, or perhaps you can issue it right here, with a separate answer?

How to animate after element with css?

1 answer 1

More articles: