Transform rotate and translate of circle img inside another img

I am trying to animate a sun with the outer rays slowly rotating. I have two images: sun_inner and sun_outer. I use absolute positioning and transform:translate to center the inner sun within the container. However, when I try to rotate the inner sun (which has a smiley face) a few degrees it is not rotating along the center axis, and the inner sun is moving up and down.

Any help in getting the rotation of the inner sun to be centered within the container is appreciated!

css:

.sun-inner {
  position:absolute;
  left:50%;
  top:50%;
  /*
   In the animation I apply translateY(-50%) translateX(-50%) 
   to keep the inner circle centered, which is not working. 
   If I have translateY(-50%) translateX(-50%) without the rotation 
   it is centered properly
  */
  animation-name:sun_inner_rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  img{
    width:150px;
    height:150px;
  }
}


.sun-outer {
  animation-name:sun_outer_rotate;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  width:30vh;
  height:30vh;
  img {
    width:30vh;
    height:30vh;
  }
}

@keyframes sunrise {
  0% {
    bottom:-130vh;
  }
  100% {
    bottom:0;
  }
}

@keyframes sun_inner_rotate {
  0% {
    transform:rotate(0deg) translateY(-50%) translateX(-50%);;
  }
  33% {
    transform:rotate(12deg) translateY(-50%) translateX(-50%);
  }
  66% {
    transform:rotate(-26deg) translateY(-50%) translateX(-50%);
  }
  100% {
    transform:rotate(10deg) translateY(-50%) translateX(-50%);
  }
}
@keyframes sun_outer_rotate {
  0% {
    transform:rotate(0deg);
  }
  33% {
    transform:rotate(360deg);
  }
  66% {
    transform:rotate(-30deg);
  }
  100% {
    transform:rotate(-360deg);
  }
}

.sunContainer {
  width:30vh;
  height:30vh;
  position:relative;
  margin-left:10%;
  margin-top:7%;
  animation-iteration-count: 1;
  animation-name:sunrise;
  animation-duration: 1.5s;
  display:flex;
  justify-content: center;
  align-items: center;
}

html:

<div class="sunContainer"> 
  <div class="sun-inner">
    <img src="/images/sun_smile.svg">
  </div>
  <div class="sun-outer">
    <img src="/images/sun-outer.svg">
  </div>
</div>