JSFiddle - React, Tailwind, and code Playground

by jayD2

HTML

<div class="sun-wrapper">
  <div class="sun">
 <img src="http://www.pngmart.com/files/3/Sun-PNG-Transparent-Image.png" alt="">
</div>
</div>

CSS

.sun-wrapper{
  position:relative;
}
.sun{
  width: 5.7%;
  position: absolute;
  top: -5%;
  left: 57%;
  animation: circle 10s linear infinite;
  transform-origin: 0px 700px;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

img{
  width:100%
}

@keyframes circle {
  from {
    transform:rotate(-60deg); 
  }
  to { 
    transform:rotate(40deg); 
  }
}