Animating an image to make it rotate in a circle

Question

I am working on image transforms, rotates, and keyframes, but I am having a bit of an issue trying to get an image to spin in a circle. I have it set to rotate 360deg and two keyframes 0 and 100. I am wanting the image to spin from the center point of the image, so it looks as if the loading circle is loading something.

Right now it seems the image spins from the top-left corner.

Does anyone see what I am doing wrong?

#spinning-circle {
  animation-name: spinning-circle;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  width: 40px;
  height: 40px;
}

@-webkit-keyframes spinning-circle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<div id="spinning-circle">
<img src="https://i.sstatic.net/WbNlQ.jpg">
</div>

Answer 1

Add

#spinning-circle img {
  width: 100%;
  height: auto;
}

to your styles

It's spinning on an offset because the image is bigger than the container. If you wish to move the origin of transformations, use the transform-origin property