How to create this animation using CSS

I wanted to know how to create this animation using CSS only. Is it possible?

5 Replies

Just an idea but you could probably create a box with another box in it.

<div class="viewbox">
  <div class="bar">
  </div>
</div>

<div class="viewbox">
  <div class="bar">
  </div>
</div>

then you could adjust the gradient and properties of the box, create a keyframe which scrolls it from one side to the other and have it on a delay

Jochem•11mo ago

You can do it with background-position and a linear gradient: https://codepen.io/jochemm/pen/JjzVgjK

CodePen

...

CodePen

...

This has been fun

AdarshOP•11mo ago

Thanks for spending your time to help me @Captain Chewie @Jochem