Compartiendo mi solución

/* --------------------------
  Base
--------------------------- */

body {
  padding-top: 60px;
    background: #0f4e7a;
}

svg {
    margen: automático;
  mostrar: bloque;
    ancho: 28%;
}

/* --------------------------
  Fotogramas clave
--------------------------- */

@fotogramas clave rise {
 0% {
    transformar:translateY(300%)
  }

  30% {
    transformar:translateY(-10%);
  }

  60% {
     transformar:translateY(20%);
  }
}

@fotogramas clave rotar {
 0% {
    transformar: scale(1);
  }
 50% {
    transformar: rotar(-5grados) scale(1.15);
    opacity: 1;
    fill: #FFDF00;
  }
  100% {
   transformar: scale(1);
  }
}

@fotogramas clave offset { 

 0% {
    stroke-opacity: 0;
  }

 30% {
    stroke-opacity: .8;
  }

 100% {
   stroke-dashoffset: 0; 
   stroke-opacity: 0;
  }
}


/* --------------------------
  Estilos SVG
--------------------------- */

.estrellas * {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

.estrella:nth-of-type(2) {
  animation: rise .5s .25s linear hacia atrás,
             rotar .6s 1s ease-in-out;
}

.estrella:nth-of-type(1) {
  animation: rise .5s .55s linear hacia atrás,
             rotar .6s 1.3s ease-in-out;
}

.estrella:nth-of-type(3) {
  animation: rise .5s .88s linear hacia atrás,
             rotar .6s 1.6s ease-in-out;
}

.stars-bg {
  stroke-opacity: 0;
  stroke-width: 7;
  stroke-dasharray: 810;
  stroke-dashoffset: 810;

  animation: offset .8s 2s linear hacia atrás;
}