A Striped Barberpole Animation

You can make background stripes in CSS by using linear-gradient. We often think of a gradient as a fade from one color to another, but the trick to stripes is to not have any fade at all. Instead, we can specify “color stops” at the same location, such that the color changes instantly from one to the next.

Then the trick to make this even easier is using repeating-linear-gradient so we can just describe the first few stripes and it will naturally repeat:

.element {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

To animate the stripes in a barberpole fashion, it’s a matter of animating the background-position. This is also just a smidge tricky. If the size of your element doesn’t match the size of the repeating stripes, moving the background-position might result in some awkward stripes like these:

Rather than trying to match up these sizes perfectly, it’s easier to blow up the background-position to 200% and then animate its position by 100%.

div {
  background-image: 
    repeating-linear-gradient(
      -45deg, 
      transparent, 
      transparent 1rem,
      #ccc 1rem,
      #ccc 2rem
    );
  background-size: 200% 200%;
  animation: barberpole 10s linear infinite;
}

@keyframes barberpole {
  100% {
    background-position: 100% 100%;
  }
}