Shutter Blinds Reveal

<!-- Shutter Blinds Reveal -->
<figure class="nuda-ie2-blinds">
  <img class="nuda-ie2-blinds__img" src="/your-image.jpg" alt="" />
  <span class="nuda-ie2-blinds__slat" style="top:0px;animation-delay:0s"></span>
  <span class="nuda-ie2-blinds__slat" style="top:20px;animation-delay:.08s"></span>
  <span class="nuda-ie2-blinds__slat" style="top:40px;animation-delay:.16s"></span>
  <span class="nuda-ie2-blinds__slat" style="top:60px;animation-delay:.24s"></span>
  <span class="nuda-ie2-blinds__slat" style="top:80px;animation-delay:.32s"></span>
  <span class="nuda-ie2-blinds__slat" style="top:100px;animation-delay:.4s"></span>
  <span class="nuda-ie2-blinds__slat" style="top:120px;animation-delay:.48s"></span>
</figure>

.nuda-ie2-blinds {
  position: relative;
  width: 200px;
  height: 140px;
  overflow: hidden;
  border-radius: 10px;
  background: #0a0a0a;
  margin: 0;
}

.nuda-ie2-blinds__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.nuda-ie2-blinds__slat {
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  background: #0a0a0a;
  transform: scaleY(1);
  transform-origin: 50% 50%;
  animation: _nuda-ie2blinds 4s ease-in-out infinite;
  will-change: transform;
}

@keyframes _nuda-ie2blinds {
  0%,12% {
    transform: scaleY(1);
  }
  45%,75% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ie2-blinds__slat {
    animation: none !important;
    transform: scaleY(0);
  }
}