使用@media和关键帧解析css中的错误

/*general CSS setting for generic devices
this will include all hd devices and above*/

* {
	margin: 0;
	padding: 0;
}

#watchonly {
	display: none;
}


/*animation of the championship logo*/

#champ {
	position: absolute;
	top: 15%;
	right: 20%;
	animation-name: champ;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 2s;
}

@keyframes champ {
	0% {
		right: 20%;
		top: 15%;
	}
	25% {
		right: 22%;
		top: 16%;
	}
	50% {
		right: 20%;
		top: 17%;
	}
	75% {
		right: 19%;
		top: 16%;
	}
	100% {
		right: 20%;
		top: 15%;
		transform: rotateY(360deg);
	}
}


/*navigation controls*/

nav ul li {
	display: inline;
}

nav ul li a, nav ul li a:visited {
	color: #006734;
	display: block;
	float: left;
	font-size: 1.25em;
	font-weight: bold;
	margin: 5px 2px;
	padding: 7px 10px 4px;
	text-shadow: 0 1px 1px white;
	text-transform: uppercase;
}

nav ul li a:hover {
	text-decoration: none;
	background-color: #009340;
}

nav, main, nav ul li a, .twitter-timeline {
	border-radius: 30px;
}

nav {
	background: #6fad60;
	padding: 0 5px;
	position: absolute;
	right: 0;
	top: 4px;
	border: 1px solid #0e1f0c;
	box-shadow: 0 1px 1px #0e1f0c;
}


/*switching off the watch only text*/

#watchonly {
	display: none;
}

.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

body {
	font-size: 15px;
	color: #f8f8f8;
	background-color: #bcbcbc;
	font-family: Arial, Helvetica, sans-serif;
}


/*the default font*/

h1, h2, h3 {
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	color: #00923f;
	text-shadow: 0 1px 1px black;
}

h1 {
	font-size: 35px;
	padding: 3px;
	text-transform: uppercase;
}

h3 {
	font-family: forte, "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	font-size: 30px;
	font-weight: normal;
	margin: 2px;
}

img {
	width: auto;
	height: 100%;
}

p {
	line-height: 120%;
	padding-bottom: 2px;
}

main .line {
	background-color: #15242a;
	border-bottom-color: #204656;
	margin: 3px;
}

.line {
	height: 1px;
	background-color: #24404c;
	border-bottom: 1px solid #416371;
	margin: 2px;
	overflow: hidden;
}

footer .line {
	margin: 2px;
}


/*Main page size*/

#page {
	width: 900px;
	margin: 0 auto;
	position: relative;
}

main {
	background-color: #006634;
	margin: 2px;
	padding: 20px;
	text-shadow: 0 2px 0 #001f10;
	margin-top: 20px;
}

footer {
	color: #000000;
	margin-bottom: 30px;
	text-align: center;
	font-size: 10px;
}

footer a, footer a:visited {
	color: #6fad60;
	background-color: #006634;
	padding: 2px 4px;
}

footer a:hover {
	text-decoration: none;
	background-color: #000000;
}

footer a.up {
	float: right;
}


/*control of the twitter frame*/

.twitter-timeline {
	border: 3px solid #00943f;
	float: right;
	margin-left: 15px;
	overflow: hidden;
}

#twitter-widget-0 {
	height: 500px !important;
	min-height: 500px !important;
}

a, a:visited {
	color: #ffffff;
	text-decoration: none;
	outline: none;
}

a:hover {
	color: black;
	text-decoration: underline;
}

a img {
	border: none;
}

iframe {
	width: 100%;
	height: 600px;
}


/*turning off the image and allowing the iframe to show*/

#whensmall {
	display: none;
}


/*control of the form*/

form {
	padding: 20px;
}

textarea {
	height: 300px;
	width: 275px;
}

input {
	padding-left: 90px;
}


/*control of map iframe*/

.map {
	width: 300px;
	height: 350px;
}


/*a very simple default for future use on limited screens 
ie watches or screens under 300px square*/

@media only screen and (max-width: 300px) {
	* {
		margin: 0;
		padding: 0;
	}
	/*Main page size*/
	#page {
		width: 290px;
		margin: 0 auto;
		position: relative;
	}
	/*switching off most of the page contect*/
	#watchonly {
		font-style: oblique;
		display: flex;
		color: black;
		text-shadow: 0 1px 1px white;
	}
	footer, nav, h1, h2, h3, p, #main, .line, #champ {
		display: none;
	}
	img {
		float: left;
		float: right;
		padding-top: 60px;
		max-width: 280px;
		max-height: 200px;
	}
}


/*Control of elements for small phone screens over 300 wide and below 500px
This has been left to action of the use in portrait also*/

@media only screen and (min-width: 301px) and (max-width: 500px) {
	/*switching off the iframe, large champions image and the watch only text*/
	#whenbig {
		display: none;
	}
	#whensmall {
		display: none;
	}
	#watchonly {
		display: none;
	}
	/*animation of the championship logo*/
	#champ {
		position: absolute;
		top: 0%;
		right: 0%;
		height: 55px;
		animation-duration: 5s;
		animation-name: champ1;
		animation-timing-function: ease-in-out;
		animation-delay: 2s;
		transform: rotateY(360deg);
	}
	@keyframes champ1 {
		0% {
			right: 0%;
			top: 0%;
		}
		25% {
			right: 2%;
			top: 2%;
		}
		50% {
			right: 4%;
			top: 1%;
			transform: rotateY(160deg);
		}
		75% {
			right: 2%;
			top: 2%;
		}
		100% {
			right: 0%;
			top: 0%;
		}
	}
	ul {
		padding: 0%;
		text-align: center;
		display: inline;
	}
	nav ul li a, nav ul li a:visited {
		color: #006734;
		font-size: 12px;
		font-weight: bold;
		margin: 0px 0px;
		padding: 10px 5px 10px;
		text-shadow: 0 1px 1px white;
		text-transform: uppercase;
	}
	/*change of the navigation*/
	nav ul li {
		display: inline;
	}
	nav {
		position: relative;
	}
	/*Main page size*/
	#page {
		width: 295px;
		margin: 0 auto;
		position: relative;
	}
	/*map size change*/
	.map {
		width: 260px;
	}
	/*switching the twitter so as to leave only a link*/
	#twitter-widget-0 {
		height: 45px !important;
		min-height: 5px !important;
	}
	.twitter-timeline {
		border: 3px solid #00943f;
		height: 300px;
		overflow: hidden;
		width: 200px;
	}
	/*edit of the font sizes*/
	h1 {
		font-size: 18px;
		text-transform: uppercase;
	}
	h3 {
		font-size: 20px;
		font-weight: normal;
		margin: 2px;
	}
	/*edit to control a smaller form*/
	form {
		padding: 30px;
	}
	textarea {
		height: 300px;
		width: 185px;
	}
	input {
		padding-left: 0px;
	}
}


/*Control of elements for larger phone screens/small tablets over 500 wide and below 700px
This has been left to action of the use in portrait also*/

@media only screen and (min-width: 501px) and (max-width: 700px) {
	/*switching off the iframe, switching on the large champions
image and off the watch only text*/
	#whenbig {
		display: none;
	}
	#whensmall {
		display: inline;
	}
	#watchonly {
		display: none;
	}
	/*edit of the font sizes*/
	h1 {
		font-size: 30px;
		text-transform: uppercase;
	}
	h3 {
		font-size: 26px;
	}
	/*Main page size*/
	#page {
		width: 490px;
		margin: 0 auto;
		position: relative;
	}
	/*change of the navigation*/
	nav ul li {
		display: block;
	}
	/*animation of the championship logo*/
	#champ {
		position: fixed;
		top: 36%;
		right: 0%;
		height: 75px;
		animation-name: Champ2;
		animation-duration: 5s;
		animation-timing-function: linear;
		animation-delay: 2s;
	}
	@keyframes Champ2 {
		0% {
			right: 00%;
			top: 36%;
		}
		5% {
			right: 05%;
			top: 29%;
		}
		10% {
			right: 10%;
			top: 20%;
		}
		15% {
			right: 15%;
			top: 13%;
		}
		20% {
			right: 20%;
			top: 07%;
		}
		25% {
			right: 25%;
			top: 05%;
		}
		30% {
			right: 30%;
			top: 07%;
		}
		35% {
			right: 35%;
			top: 13%;
		}
		40% {
			right: 40%;
			top: 20%;
		}
		45% {
			right: 45%;
			top: 29%;
		}
		50% {
			right: 50%;
			top: 36%;
			transform: rotateY(360deg);
		}
		55% {
			right: 45%;
			top: 43%;
		}
		60% {
			right: 40%;
			top: 52%;
		}
		65% {
			right: 35%;
			top: 59%;
		}
		70% {
			right: 30%;
			top: 65%;
		}
		75% {
			right: 25%;
			top: 66%;
		}
		80% {
			right: 20%;
			top: 65%;
		}
		85% {
			right: 15%;
			top: 59%;
		}
		90% {
			right: 10%;
			top: 52%;
		}
		95% {
			right: 05%;
			top: 43%;
		}
		100% {
			right: 00%;
			top: 36%;
		}
	}
	/*control of the twitter frame size*/
	#twitter-widget-0 {
		width: 100px !important;
		height: 600px !important;
	}
	/*control of the map iframe size*/
	.map {
		width: 250px;
		height: 300px;
		padding-bottom: 40px;
	}
	/*edit to control a smaller form*/
	form {
		padding: 20px;
	}
	textarea {
		height: 300px;
		width: 185px;
	}
	input {
		padding-left: 0px;
	}
}


/*Control of elements for large phone screens/sd tablets over 700 wide and below 900px
This has been left to action of the use in portrait also*/

@media only screen and (min-width: 701px) and (max-width: 900px) {
	/*switching off the iframe, switching on the large champions
image and off the watch only text*/
	#whenbig {
		display: none;
	}
	#whensmall {
		display: inline;
		padding: 100px;
	}
	#watchonly {
		display: none;
	}
	/*Font size control*/
	h1 {
		font-size: 44px;
		text-transform: uppercase;
		padding: 0px 0px 0px;
	}
	h3 {
		font-size: 38px;
	}
	/*Main page size*/
	#page {
		width: 700px;
		margin: 0 auto;
		position: relative;
	}
	/*edit of the navigation bar*/
	nav ul li {
		display: block;
	}
	/*Animation of the championship logo*/
	#champ {
		position: absolute;
		top: 10px;
		right: 30vw;
		animation-name: champ3;
		animation-duration: 5s;
		animation-timing-function: linear;
		animation-delay: 2s;
	}
	@keyframes champ3 {
		0% {
			right: 30vw;
			top: 10px;
		}
		10% {
			right: 25vw;
			top: 25px;
		}
		18% {
			right: 25vw;
			top: 40px;
		}
		24% {
			right: 30vw;
			top: 55px;
		}
		32% {
			right: 35vw;
			top: 70px;
		}
		40% {
			right: 35vw;
			top: 85px;
		}
		48% {
			right: 30vw;
			top: 100px;
			transform: rotateY(360deg);
		}
		56% {
			right: 25vw;
			top: 85px;
		}
		64% {
			right: 25vw;
			top: 70px;
		}
		72% {
			right: 30vw;
			top: 55px;
		}
		80% {
			right: 35vw;
			top: 40px;
		}
		90% {
			right: 35vw;
			top: 25px;
		}
		100% {
			right: 30vw;
			top: 10px;
		}
	}
	/*twitter frame size*/
	#twitter-widget-0 {
		width: 300px !important;
		min-height: 5px !important;
	}
	/*map iframe size*/
	.map {
		width: 300px;
		height: 300px;
		padding-bottom: 40px;
	}
	/*form size controls*/
	form {
		padding: 50px;
	}
	textarea {
		height: 300px;
		width: 245px;
	}
	input {
		padding-left: 60px;
	}
}/*general CSS setting for generic d