Just copy the code and paste to get a animation in html and css

By  at August 09, 2019    
Animation with html and css . Just copy the code  and paste to get animation

<!DOCTYPE html>
<html>
<head>
<title>animation of football</title>
<style type="text/css">
.boy{
width: 300px;
  height: 300px;
  border-radius: 150px;
  background: linear-gradient(blue, pink,yellow);
  animation: mymove infinite;
  animation-duration: 10s;
  animation-duration: 10s;
   position: absolute;
 top: 50px;
 right: 0px;

}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1000px;}
}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1000px;}
}


.girl{
width: 300px;
  height: 300px;
  border-radius: 150px;
  background: linear-gradient(red, pink,pink,black);
  animation: mymove infinite;
  animation-duration: 6s;
  animation-duration: 6s;
   position: absolute;
 top: 0px;
 right: 0px;

}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

.you{
width: 300px;
  height: 300px;
  border-radius: 150px;
  background: blue;
  animation: mymove infinite;
  animation-duration: 8s;
  animation-duration: 8s;
   position: absolute;
 top: 100px;
 right: 0px;

}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

.she{
width: 300px;
  height: 300px;
  border-radius: 150px;
  background: red;
  animation: mymove infinite;
  animation-duration: 4s; 
  animation-duration: 4s;
   position: absolute;
 top: 70px;
 right: 0px;

}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}

}


.he{
width: 300px;
  height: 300px;
  border-radius: 150px;
  background: #8B0000;
  animation: mymove infinite;
  animation-duration: 2s;
  animation-duration: 2s;
   position: absolute;
 top: 50px;
 right: 0px;

}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}

}
</style>
}
</head>
<body>

<div class="boy"></div>

<div class="girl"></div>
<div class="you"></div>
<div class="she"></div>
<div class="he"></div>

</body>
</html>
animation of football }