Star Rating Pop

<div class="nuda-cc2-star-rating" role="img" aria-label="Five-star rating popping in">
  <span class="nuda-cc2-star-rating__star" aria-hidden="true" style="--d:0s">
    <svg viewBox="0 0 24 24" fill="#e4ff54"><path d="M12 2l2.9 6.26L22 9.27l-5 4.87L18.2 22 12 18.56 5.8 22 7 14.14l-5-4.87 7.1-1.01L12 2z"/></svg>
  </span>
  <span class="nuda-cc2-star-rating__star" aria-hidden="true" style="--d:.12s">
    <svg viewBox="0 0 24 24" fill="#e4ff54"><path d="M12 2l2.9 6.26L22 9.27l-5 4.87L18.2 22 12 18.56 5.8 22 7 14.14l-5-4.87 7.1-1.01L12 2z"/></svg>
  </span>
  <span class="nuda-cc2-star-rating__star" aria-hidden="true" style="--d:.24s">
    <svg viewBox="0 0 24 24" fill="#e4ff54"><path d="M12 2l2.9 6.26L22 9.27l-5 4.87L18.2 22 12 18.56 5.8 22 7 14.14l-5-4.87 7.1-1.01L12 2z"/></svg>
  </span>
  <span class="nuda-cc2-star-rating__star" aria-hidden="true" style="--d:.36s">
    <svg viewBox="0 0 24 24" fill="#e4ff54"><path d="M12 2l2.9 6.26L22 9.27l-5 4.87L18.2 22 12 18.56 5.8 22 7 14.14l-5-4.87 7.1-1.01L12 2z"/></svg>
  </span>
  <span class="nuda-cc2-star-rating__star" aria-hidden="true" style="--d:.48s">
    <svg viewBox="0 0 24 24" fill="#e4ff54"><path d="M12 2l2.9 6.26L22 9.27l-5 4.87L18.2 22 12 18.56 5.8 22 7 14.14l-5-4.87 7.1-1.01L12 2z"/></svg>
  </span>
</div>

.nuda-cc2-star-rating {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 180px;
  height: 70px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
}

.nuda-cc2-star-rating__star {
  width: 26px;
  height: 26px;
  opacity: 0;
  transform: scale(.2) rotate(-25deg);
  will-change: transform,opacity;
  animation: _nuda-cc2starpop 3.4s cubic-bezier(.34,1.56,.64,1) var(--d) infinite;
}

.nuda-cc2-star-rating__star svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes _nuda-cc2starpop {
  0% {
    opacity: 0;
    transform: scale(.2) rotate(-25deg);
  }
  8% {
    opacity: 1;
  }
  18% {
    transform: scale(1.3) rotate(8deg);
  }
  26% {
    transform: scale(1) rotate(0deg);
  }
  78% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  90% {
    opacity: .3;
    transform: scale(.7) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(.2) rotate(-25deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cc2-star-rating__star {
    animation: none;
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}