@keyframes travel {
  from { left: 0;     }
  to   { left: 640px; }
}

@keyframes bounce {
  from, to  {
    bottom: 0;
    animation-timing-function: ease-out;
  }
  50% {
    bottom: 220px;
    animation-timing-function: ease-in;
  }
}

@keyframes spin {
  from {
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}






@keyframes travel2 {
  from { left: 636px;     }
  to   { left: 0px; }
}

@keyframes bounce2 {
  from, to  {
    bottom: 0;
    animation-timing-function: ease-out;
  }
  50% {
    bottom: 210px;
    animation-timing-function: ease-in;
  }
}

@keyframes spin2 {
  from {
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}




#stage {
  position: relative;
  margin: 1em auto;
  width: 660px;
  height: 240px;
  border: 2px solid #666;
  background: #cff;
  margin-top:20px;
  box-shadow:1px 1px 10px #343434;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */;

}

#traveler {
  position: absolute;
  width: 20px;
  height: 238px;

  -webkit-animation-name: travel;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 2.8s;

  animation-name: travel;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2.8s;
}

#bouncer {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: red;
  background: -webkit-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
  background: -moz-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
  background: -o-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
  background: -ms-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
 /*background: radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;*/
  -webkit-animation-name: bounce, spin;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2.2s;
  animation-name: bounce, spin;
  animation-iteration-count: infinite;
  animation-duration: 2.2s;
}
#traveler2 {
  position: absolute;
  width: 30px;
  height: 240px;

  -webkit-animation-name: travel2;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 4.8s;

  animation-name: travel2;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 4.8s;
}

#bouncer2 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: blue;
  background: -webkit-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), blue 50%) blue;
  background: -moz-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), blue 50%) blue;
  background: -o-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), blue 50%) blue;
  background: -ms-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), blue 50%) blue;
 /* background: radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), blue 50%) blue;*/
  -webkit-animation-name: bounce, spin;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 4.2s;
  animation-name: bounce2, spin2;
  animation-iteration-count: infinite;
  animation-duration: 4.2s;
 
}
body {
	background-color:#CCC;
	}
	h1 {
		width:100%;
		margin:10px auto;
		color:red;
		text-align:center;
		font-size:36px;}
		
 wrap {
  perspective: 200px;
  perspective-origin: 50% 50%;
}

.cube {
  position: relative;
  margin: 100px auto;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
}
.face {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 200px;
  height: 200px;
  color: #666;
  font-size: 18px;
  text-align: center;
  line-height: 200px;
  box-shadow: inset 0 0 4px rgba(0,0,0,1);
  background-color:rgba(255,0,0,.5);
 
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(-180deg);
}
.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}
.top {
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
}

img {box-shadow:1px 1px 1px #333;
border-radius:5px;}

section {
	width:100%;
	margin:20px auto;
	text-align:center;
	}
	
		
		 img[alt="CSS Validate"], img[alt="html5 Validate"] {
	 width:64px;
	 height:22px;
	display:inline-block;
	
	 margin: 10px auto;
	 text-align:center;
	 }
	 div.val {
		 width:100%;
		 margin:0 auto;
		 text-align:center}