Question

/*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;
	}
}

我一直试图通过w3c验证器验证我的网站。

html5通过但CSS不会。我在关键帧处收到解析错误（x6）。

我尝试了各种法式支架布置，因为看起来不同的法式支架布局不正确

我已经包含了我的CSS 非常感谢任何帮助

这是我第一次尝试html和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;
    }
}

Answer 1

<强>更新

根据https://www.w3.org/TR/CSS2/media.html#at-media-rule at-rules（@...）在@media规则（，如@keyframes规则）中无效。

因此，您可能必须在媒体查询之外定义动画，并将它们分配给媒体查询中的元素。

如果你把你的css放在一个可以自动缩进的编辑器中，你会看到问题

@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;
    @keyframes champ1 {
      25% {
        right: 2%;
        top: 2%;
      }
      50% {
        right: 4%;
        top: 1%;
        75% {
          right: 2%;
          top: 2%;
        }
        100% {
          right: 0%;
          top: 0%;
        }
      }
      ul {
        padding: 0%;
        nav ul li a,
        nav ul li a:visited {
          color: #006734;
          /*change of the navigation*/
          nav ul li {
            display: inline;
          }
          nav {
            position: relative;
          }
          /*Main page size*/
          #page {
            width: 295px;
            /*map size change*/
            .map {
              width: 260px;
            }
            /*switching the twitter so as to leave only a link*/
            #twitter-widget-0 {
              height: 45px !important;
              .twitter-timeline {
                border: 3px solid #00943f;
                /*edit of the font sizes*/
                h1 {

正如您所看到的，代码缺少某些}，因此发生了错误的嵌套。

Answer 2

您的@keyframe无法进入您的区块#champ，它必须是这样的： `

div {
    width: 100px;
    height: 100px;
    background: red;
    position :relative;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}

<!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

`

请参阅。 mymove是可变的，它位于顶层，为varialbe

Answer 3

这些验证器不是有效的html和css的最终所有权限。如果它工作，并且浏览器没有抛出任何错误，那么你没事。

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

3 个答案: