CSS Only Animated Stripes Background | Infinite CSS Animation & Repeating Gradients | Learn CSS

By using only one div, few lines of CSS code and keyframes CSS animations, we can create beautiful CSS only animated stripes backgrounds easily that animate infinitely. We are targeting a DIV and creating its CSS pseudo elements. CSS before and after elements will have styles. We will use repeating gradient and we will use CSS keyframes animation. We will use CSS transform to move stripes repeatedly. We have root styles, body, stripes, before and after elements for stripes div, and keyframes in CSS.

I am creating root level variable just so that size does not confuse you because it will be used at many places. Body has full width and height and its overflow is hidden. Stripes is the main div that will have actual stripes inside it at its pseudo element. Background will be a repeating-linear-gradient. To animate stripes, we will use keyframes.

Now our animation is working but it's faulty. It looks like it needs more width. So we will add some more width for the stripe. In animation, because we are moving the stripe to left 110px, we will add those 110px in its width. Basically stripe is not moving in one direction infinitely. Stripe is moving 110px to the left and then is repeating same pattern. We don't see 110px gap to the right, because stripes area is more than 110px in width than 100% width. We will add another cool CSS effect to this stripes background. We will darken its edges so that stripes look brighter from center and darker from edges. For that we will use CSS radial gradient. You can use this stripes background for full page or in a loader bar or progress bar or elements like that.

- Code

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#webstylepress #css #cssAnimation #keyframes #gradients #animation #webdevelopment

[TLcivic]

Cant get it to work. Its 100% me, thanks for the video.