вращение светящегося изображения с помощью CSS

Question

Как я могу сделать это изображение с бесконечной анимацией свечения, чтобы вращаться одновременно с помощью CSS.Я пытаюсь использовать две анимации одновременно.Я хочу, чтобы это вращалось бесконечно.

.topbar-artwork img{
  animation: glowing 600ms infinite;
}

@keyframes glowing {
  0% { box-shadow: 0 0 -10px #000; }
  40% { box-shadow: 0 0 20px #000; }
  60% { box-shadow: 0 0 20px #000; }
  100% { box-shadow: 0 0 -10px #000; }
}

<div class="topbar-artwork">
  <img src="https://i.imgur.com/0INjJXJ.jpg">
  </div>

Answer 1

Для реализации функции вращения используйте свойство css transform: rotate(deg)

    .topbar-artwork img{
  animation: glowing 600ms infinite;
  animation-timing-function: linear;
}

@keyframes glowing {
  0% { box-shadow: 0 0 -10px #000; transform: rotate(0deg);}
  40% { box-shadow: 0 0 20px #000; }
  60% { box-shadow: 0 0 20px #000; }
  100% { box-shadow: 0 0 -10px #000; transform: rotate(360deg);}
}

    <div class="topbar-artwork">
      <img src="https://i.imgur.com/0INjJXJ.jpg">
      </div>

Answer 2

Вы можете просто добавить другую анимацию:

.topbar-artwork img {
  animation: glowing 600ms infinite,
             spin 2s infinite linear;
}

@keyframes glowing {
  0% {
    box-shadow: 0 0 0px #000;
  }
  40% {
    box-shadow: 0 0 20px #000;
  }
  60% {
    box-shadow: 0 0 20px #000;
  }
  100% {
    box-shadow: 0 0 0px #000;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="topbar-artwork">
  <img src="https://i.imgur.com/0INjJXJ.jpg">
</div>