.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: url(http://www.programik.eu/images/onas.jpg) repeat-x;
  background-size: auto 100%;
  -webkit-animation: move-map 34s infinite linear;
  -moz-animation: move-map 34s infinite linear;
  -o-animation: move-map 34s infinite linear;
  -ms-animation: move-map 34s infinite linear;
  animation: move-map 34s infinite linear;
  
  
  
}
.zaslona
 {
	 position:absolute;
	 width:100%;
	 height:100%;
	  top: 0%;
	  left: 0%;
	  background-color:red;
	  -webkit-animation: ruch_zaslony 34s linear;
  -moz-animation: ruch_zaslony 34s  linear;
  -o-animation: ruch_zaslony 34s linear;
  -ms-animation: ruch_zaslony 34s  linear;
  animation: ruch_zaslony 34s linear;
 }

.ball:hover {
        animation-play-state:paused;
        -webkit-animation-play-state:paused; /* dla Google Chrome, Safari, Opera 15+ */
}

.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
  -webkit-filter: blur(5px);
  z-index: 2;
}
.ball:after {
  content: "";
  position: absolute;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle at 50% 30%, rgba(245, 237, 48, 0), rgba(200, 190, 20, 0.2) 50%, #575300 100%);
}
.ball .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
    -webkit-transform: rotateX(90deg) translateZ(-160px);
    transform: rotateX(90deg) translateZ(-160px);
    z-index: 1; 
	
	
	
	
	
	
	}
.stage {
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 20px;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

@keyframes animacja {
  0% {
    transform: none;
  }
  20% {
    transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
  }
  25%, 44% {
    transform: none;
  }
  50%, 60% {
    transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
  }
  66%, 100% {
    transform: none;
  }
}

@keyframes ruch_zaslony {
  0% {
	width:100%;  
    height:100%;
  }
  100% {
	  width:100% 
    height:10%;
  }
}



@-moz-keyframes move-map {
  0% {
    background-position: -900px 0; }

  100% {
    background-position: 0 0; } }

@-webkit-keyframes move-map {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -900px 0; }
}


@-o-keyframes move-map {
  0% {
    background-position: -900px 0; }

  100% {
    background-position: 0 0; } }

@-ms-keyframes move-map {
  0% {
    background-position: -900px 0; }

  100% {
    background-position: 0 0; } }

@keyframes move-map {
  0% {
    background-position: -900px 0; }

  100% {
    background-position: 0 0; } }