body {
	  background-color: lightblue;
  }

  h1 {
	    color: navy;
	      margin-left: 20px;
      }


p {

	color:maroon;

}


ul {
	   float: left;
	display: inline;
	  list-style-type: none;
	    margin: 0;
	      padding: 0;
      }
 
          
        .ball { 
            height: 100px; 
            border-radius: 50%; 
            background-color: navy; 
            animation: bounce 10s; 
            animation-direction: alternate; 
            animation-timing-function: cubic-bezier(.5, 0.05, 1, .5); 
            animation-iteration-count: infinite; 
        } 
          
        @keyframes bounce { 
            from { 
                transform: translate3d(0, 0, 0); 
            } 
            to { 
                transform: translate3d(0, 10000px, 0); 
            } 
        } 
        /* Prefix Support */ 


 .pingpong {
	animation: leftright 10s;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(.5, 0.01, 1, 0.05);
	animation-iteration-count: infinite;
	
 }

 


 @keyframes leftright {
  from{
	transform: translate3d(0, 0, 0);
  }
  to {
	transform: translate3d(1000px, 0, 0);
  }
 } 

.pepe {
	animation: pepeani 1.7s;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-iteration-count: infinite;

}

/*.pepe: pepeani 1.7s linear 0s infinite normal none; */



@keyframes pepeani {
	from {
	transform: translate3d(-100px, -100px, -100px);
	}
	to {
	transform: translate3d(1000px, 1000px, 1000px);
	}
  0%,
  100% {
	transform: rotate(0deg);
  }

  10% {
	transform: rotate(2deg);
  }

  20%,
  40%,
  60% {
	transform: rotate(-4deg);
  }

  30%,
  50%,
  70% {
	transform: rotate(4deg);
  }

  80% {
	transform: rotate(-2deg);
  }

  90% {
	transform: rotate(2deg);
  }
}