Circle movment

by Rijo R

HTML

<div class="sun">
 <div class="dot"></div>
</div>

CSS

.dot{
    position:absolute;
    top:0;
    left:0;
    width:20px;
    height:20px;
    background:red;
    border-radius:50%;
     background: white;
    border: 5px solid red;
}
.sun{
    width:200px;
    height:200px;
    position:absolute;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:shimmy;
    -webkit-animation-duration:3s;
    top:10px;
    left:50px;
    animation-direction: alternate;
}


@keyframes shimmy {
  0% {
    transform: translate(0, 0);    
  }
  100% {
    transform: translate(20px, 100px);
  }
}