Simple CSS animation



Just a simple moving circle




<div></div>                    
                  
                



div{
  width:200px;
  height:200px;
  background-color:black;
  border-radius:50%;
  position: absolute;
  animation-name:niyi;
  animation-duration:4s;
  animation-iteration-count: infinite;
}
@keyframes niyi{
  10%{
    top:10px;
    background: red;
    left:10px
  }
  50%{
    top:40px;
    background: orange;
    left:40px;
  }
  100%{
    top:0px;
    background: black;
      
  }
}