@charset "utf-8";
/* CSS Document */
body {
	background:#000;
	position:relative;
	width:100%;
	height:800px;
}
.box {
	width:200px;
	height:200px;
	background-color:#393;
	box-shadow:1px 1px 10px #343434;
	position:relative;
	animation-name: slide;
	animation-duration: 10s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
}
p {
	color:#FFF;
	animation-name: words;
	position:relative;
	animation-name: words;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	font-size:20px;
	text-align:center;
	padding-top:160px;
	text-shadow:0px 0px 2px #000;
}
@keyframes slide {  0% {
transform: translate(0px, 0px);
}
 25% {
transform: translate(150px, 0px);
 animation-timing-function: linear;
 background-color: yellow;
}
 50% {
transform: translate(300px, 0px);
 background-color: red;
}
 75% {
transform: translate(450px, 0px);
 background-color: blue;
 animation-timing-function: linear;
}
 100% {
transform: translate(600px, 0px);
 background-color:orange;
}
}
@keyframes words {  0% {
transform:rotate(0deg);
 font-size:20px;
}
 10% {
transform:rotate(15deg);
font-size:20px;
}
 20% {
transform:rotate(30deg);
 font-size:20px;
}
 30% {
transform:rotate(90deg);
 font-size:20px;
}
 40% {
transform:rotate(120deg); 
font-size:20px;
}
 50% {
transform:rotate(150deg);
 font-size:20px;
}
 60% {
transform:rotate(180deg);
 font-size:20px;
}
 70% {
transform:rotate(210deg);
 font-size:20px;
}
 80% {
transform:rotate(240deg);
 font-size:20px;
}
 90% {
transform:rotate(270deg);
 font-size:20px;
}
 100% {
transform:rotate(320deg);
 font-size:20px;
}
}

.rocket {
	position:absolute;
	left:10px;
	bottom:-200px;
}
.rocket img {
	animation-name: rocket;
	animation-duration: 5s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-direction:alternate;
}


 @keyframes rocket {  0% {
 transform: translate(100px, -20px);
 opacity:1;

}
 10% {
 transform: translate(100px, -70px);
 opacity:.9;
}
 20% {
 transform: translate(100px, -100px);
 opacity:.9;
}
 30% {
 transform: translate(100px, -150px);
 opacity:.8;
}
 40% {
 transform: translate(100px, -250px);
 opacity:.8;
}
 50% {
 transform: translate(100px, -350px);
 opacity:.7;
 
}
 60% {
 transform: translate(100px, -450px);
 opacity:.6;
}
 70% {
 transform: translate(100px, -550px);
 opacity:.4;
 
}
 80% {
 transform: translate(100px, -650px);
 opacity:.3;
}
 90% {
 transform: translate(100px, -750px);
 opacity:.2;

}
 100% {
 transform: translate(100px, -950px);
 opacity:.1;
  box-shadow:0px 60px 200px red; 
}
}

img[alt="CSS Validate"], img[alt="html5 Validate"] {
	 width:64px;
	 height:22px;
	display:inline-block;
	
	 margin: 10px auto;
	 text-align:center;
	 }
	 div.val {
		position:absolute;
		top:0px;
		left:500px;}