body {height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red,  yellow, green, blue, orange, violet); /* Standard syntax (must be last) */
  border-radius: 25px;
  padding: 20px; } 
section { color: white ; background-color: blue; } 
article { color: white; background-color: black;} 

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 1s infinite alternate;
  ANIMATION-FILL-MODE: backwards
}

@keyframes myfirst {
  0%   {background-color:black; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:black; left:0px; top:0px;}
}

#div1 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse; 
  transform: translateY(50%);
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

img { 

  position: relative;
  animation: mymove 5s infinite;
  animation-delay: 1s

  }
@keyframes mymove {
  from {left: 0px;}
  to {left: 100%;}