# Animating Stripes in CSS

**URL:** <https://forum.kirupa.com/t/animating-stripes-in-css/638502>\
**Category:** web dev\
**Created:** [July 17, 2018, 1:56am UTC](https://forum.kirupa.com/t/animating-stripes-in-css/638502 "2018-07-17T01:56:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 17, 2018, 1:56am UTC](https://forum.kirupa.com/t/animating-stripes-in-css/638502/1 "2018-07-17T01:56:14Z")

</div>

For the past few weeks, I’ve been playing on and off with animating stripes in CSS:

They way [these stripes are created](https://www.kirupa.com/animations/examples/stripes.htm) is by relying on CSS gradients. Animating them is fairly straightforward-ish. The first four rely entirely on CSS animations for their moving and sliding. The last one, the one with the circular stripes that zoom outward, is a bit different since we are animating gradient stop positions and swapping colors. Two things that can’t be done in CSS, so we had to fallback to JavaScript. I’ll probably write in more detail about all of these at some point, but in the meantime check out the following resources related to this example:

- [Live Examples](https://www.kirupa.com/animations/examples/stripes.htm) (View Source to see how they are created)

- [Creating Circular Stripes](https://www.kirupa.com/animations/radial_gradient_stripes.htm)

- [Creating the Zooming Concentric Circles / Stripes](https://www.kirupa.com/animations/animating_circular_concentric_stripes.htm)

Reply below if you have any comments or questions about how it was built.

Cheers,  
Kirupa 🙂

---

<div class="post-metadata">

**Author:** ![prg9](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@prg9](https://forum.kirupa.com/u/prg9)\
**Post date:** [July 20, 2018, 5:55pm UTC](https://forum.kirupa.com/t/animating-stripes-in-css/638502/2 "2018-07-20T17:55:42Z")

</div>

I cam here to see Bill Murray & John Candy, fun stuff though. 😄

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 20, 2018, 8:19pm UTC](https://forum.kirupa.com/t/animating-stripes-in-css/638502/3 "2018-07-20T20:19:08Z")

</div>

hahaha!