Trophy Reveal

<div class="nuda-cc2-trophy-reveal" role="img" aria-label="Trophy reveal with a shine sweep">
  <svg class="nuda-cc2-trophy-reveal__trophy" viewBox="0 0 24 24" fill="#e4ff54" aria-hidden="true">
    <path d="M7 3h10v2h3v1.5c0 2.6-2 4.8-4.6 5.2A5 5 0 0 1 13 15.4V18h3v2H8v-2h3v-2.6a5 5 0 0 1-2.4-3.7C6 11.3 4 9.1 4 6.5V5h3V3zm0 4H5.2c.2 1.4 1.3 2.5 2.6 2.9-.1-.4-.2-.9-.2-1.4V7zm10 0h-1.8v1.5c0 .5-.1 1-.2 1.4C16.5 9.5 17.6 8.4 17.8 7z"/>
  </svg>
  <span class="nuda-cc2-trophy-reveal__shine" aria-hidden="true"></span>
</div>

.nuda-cc2-trophy-reveal {
  position: relative;
  width: 160px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
}

.nuda-cc2-trophy-reveal__trophy {
  width: 56px;
  height: 56px;
  opacity: 0;
  transform: scale(.4) rotate(-10deg);
  will-change: transform,opacity;
  animation: _nuda-cc2trophyreveal 4s cubic-bezier(.34,1.56,.64,1) infinite;
}

.nuda-cc2-trophy-reveal__shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 100%;
  background: linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform: translateX(-160px) skewX(-20deg);
  opacity: 0;
  will-change: transform,opacity;
  animation: _nuda-cc2trophyshine 4s ease-in-out infinite;
}

@keyframes _nuda-cc2trophyreveal {
  0% {
    opacity: 0;
    transform: scale(.4) rotate(-10deg);
  }
  12% {
    opacity: 1;
  }
  24% {
    transform: scale(1.12) rotate(4deg);
  }
  34% {
    transform: scale(1) rotate(0deg);
  }
  88% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  96% {
    opacity: .3;
  }
  100% {
    opacity: 0;
    transform: scale(.4) rotate(-10deg);
  }
}

@keyframes _nuda-cc2trophyshine {
  0%,36% {
    transform: translateX(-160px) skewX(-20deg);
    opacity: 0;
  }
  42% {
    opacity: .6;
  }
  58% {
    transform: translateX(160px) skewX(-20deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

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