Topics

Kevin Powell - Community•5mo ago

How to create this animation using CSS

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

5 Replies

Captain Chewie•5mo ago

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•5mo ago

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

CodePen

...

Captain Chewie•5mo ago

https://codepen.io/ChewieTea/pen/oNVOKNB?editors=1100

CodePen

...

Captain Chewie•5mo ago

This has been fun

Adarsh•5mo ago

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

Kevin Powell - Community Join

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

34KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

Best way to achieve this layout with GridI'm trying to build this layout. I've done so with flexbox using media queries for responsiveness. H Laravel 10 MigrationI'm having a world of trouble with migration. As I understand it you need to have an existing datab How to add more number options, but keep the card count at 5 in Memory Card?https://cdl-memory-card.netlify.app/ https://github.com/callum-laing/sv-memory-card It will change Hosting Svelte Projects on NetlifySo I do have my portfolio hosted via Netlify, but it was awhile ago and I now can't remember how to Help with storing user DataHi everyone, hope the coding is going well. I'm at the part of my website where I need to store use Bootstrap-Table: Table Sticky Header extension not workingI copied the exact same starter template they have on their documentation, just to make sure I wasn'is it possible to make divs grow according to its grid cell?I'm trying to make a wordle game and a problem I'm confronting is about responsibility. I want each Grid with Toggleable Sidebar IssueWell, copilot can't figure it out so maybe you guys can. I'm trying to create a sidebar that is to Portfolio FeedbackHey, guys I recently finished my portfolio and would like to share the final result here to receive oveflow-y scroll using % inside a flex itemHi there! I have a problem with a layout and not sure if it´s posible resolve using flex. I added a