JSFiddle - React, Tailwind, and code Playground

HTML

Use case: A classic loader that we apply to different elements and it need to be synchronize among all of them. You can try with background but you will have a hard time finding the values (and it won't be easily scalable).Also animating transform will give better perfomarnce than background

<div id="cards">
  <div class="card">
    <div>
      <div class="stub circle"></div>
    </div>
    <div>
      <div class="stub"></div>
      <div class="stub"></div>
      <div class="stub"></div>
    </div> 
  </div>
  <div class="card">
    <div>
      <div class="stub circle"></div>
    </div>
    <div>
      <div class="stub"></div>
      <div class="stub"></div>
      <div class="stub"></div>
    </div> 
  </div>
  <div class="card">
    <div>
      <div class="stub circle"></div>
    </div>
    <div>
      <div class="stub"></div>
      <div class="stub"></div>
      <div class="stub"></div>
    </div> 
  </div>
</div>

CSS

#cards {
  border:2px solid;
  position:relative;
  padding:10px;
  overflow:hidden;
}
.card {
  display: inline-flex;
  margin-top: 20px;
}

.stub {
  width: 150px;
  height: 12px;
  margin: 8px;
  border-radius: 8px;
  margin-bottom: 8px;
  z-index:0;
  -webkit-mask:linear-gradient(#fff 0 0);
}
.stub:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  width:200%;
  bottom:0;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.04) 0 0) left/50% 100%,
    linear-gradient(to right, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.04) 20%) right/50% 100%;
  background-repeat:no-repeat;
  animation: stub 1.3s linear infinite;
  pointer-events:none;
}

.circle {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 20px;
}

@keyframes stub {
  100% { transform:translate(50%); }
}