Draaien en roteren met mooie overgang

.sun-container 
  {
    width: 128px;
    height: 128px;
    animation: in 2s linear 0s infinite reverse;
    animation-play-state: paused;
  }

.sun-icon {animation: in 4s linear 0s infinite normal;}
.sun-container:hover {animation-play-state: running;}

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

echo "<div class='sun-container'>";
echo "<img loading='lazy' class='sun-icon' src='";
bloginfo('template_directory');
echo "/images/sun.png' />";
echo "</div>";