Animated stripes CSS

by Slava

HTML

<div class="animate-moving-stripes">TEST</div>

CSS

@keyframes movingStripes{from{background-position: 0 0;}to{background-position: 60px 30px;}}
.animate-moving-stripes{
  background-size: 30px 30px;
  background-image: linear-gradient(
    45deg, 
    rgba(0,0,0,0.1) 25%, 
    transparent     25%, 
    transparent     50%, 
    rgba(0,0,0,0.1) 50%, 
    rgba(0,0,0,0.1) 75%, 
    transparent     75%, 
    transparent
  );  
  animation: movingStripes 0.5s linear infinite;
}