'Animated Circle Border around Image?

I'm trying to animate a circle around an image, but my coding makes the image spin along with the circle border, is there any way to stop the image from spinning but keep the border spinning? help please.

.sidebar img { position:absolute; left:105px; top:30px; width:110px; height:110px; border-radius:50%; -webkit-filter:grayscale(0%); border-radius:50%; border:10px solid c5c6cc ; border:10px dashed #c49683; animation-name: spinning-circle;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  width: 110px;
  height: 110px;
   outline-color: #EA3556;
    box-shadow: 0 0 0 6px yellow;
}

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


Solution 1:[1]

You need to separate spinner and image element like below,

img {
    position: relative;
    left: 107px;
    top: 32px;
    border-radius: 50%;
    width: 110px;
    height: 110px;
}
.image {
    position: absolute;
    left: 105px;
    top: 30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    -webkit-filter: grayscale(0%);
    border-radius: 50%;
    border: 10px solid c5c6cc;
    border: 10px dashed #c49683;
    animation-name: spinning-circle;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    width: 110px;
    height: 110px;
    outline-color: #EA3556;
    box-shadow: 0 0 0 6px yellow;
}

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

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
<div class="image">
</div>
<img src="https://www.w3schools.com/w3css/img_lights.jpg">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions