Question

在800px以上的显示器上一切正常，但是在800px或者低于800px时，它不能按预期工作。

我的HTML和CSS如下：

.my_test{
	width:50px;
	height: 50px;
	background:red;
	display: inline-block;
	-webkit-animation: aaa 0.5s infinite;
	-o-animation: aaa 0.5s infinite;
	animation: aaa 0.5s infinite;

	position: relative;
}


@-webkit-keyframes aaa {
	from { left:0px; }
	to { left:50px; }
}
@-o-keyframes aaa {
	from { left:0px; }
	to { left:50px; }
}
@-moz-keyframes aaa {
	from { left:0px; }
	to { left:50px; }
}
@keyframes aaa {
	from { left:0px; }
	to { left:50px; }
}

@media screen (max-width: 800px) {
	
	@-webkit-keyframes aaa {
		from { top:0px; }
		to { top:50px; }
	}
	@-o-keyframes aaa {
		from { top:0px; }
		to { top:50px; }
	}
	@-moz-keyframes aaa {
		from { top:0px; }
		to { top:50px; }
	}
	@keyframes aaa {
		from { top:0px; }
		to { top:50px; }
	}
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/_test.css">
</head>
<body>
	<div class="my_test" id="my_test">
		
	</div>
	
</body>
</html>

我是否在媒体查询中错误地使用了关键帧？

Answer 1

您只是错过了媒体查询中的and：

@media screen and (max-width: 800px)

这里有效。您可以在预览窗格中看到运行代码段时，它会按媒体查询中定义的关键帧中的指示向上和向下进行动画制作。要在宽度超过800px时看到它正常工作，请点击“全屏”。

.my_test{
	width:50px;
	height: 50px;
	background:red;
	display: inline-block;
	-webkit-animation: aaa 0.5s infinite;
	-o-animation: aaa 0.5s infinite;
	animation: aaa 0.5s infinite;
	position: relative;
}

@-webkit-keyframes aaa {
	from { left:0px; }
	to { left:50px; }
}
@-o-keyframes aaa {
	from { left:0px; }
	to { left:50px; }
}
@-moz-keyframes aaa {
	from { left:0px; }
	to { left:50px; }
}
@keyframes aaa {
	from { left:0px; }
	to { left:50px; }
}

@media screen and (max-width: 800px) {
	
	@-webkit-keyframes aaa {
		from { top:0px; }
		to { top:50px; }
	}
	@-o-keyframes aaa {
		from { top:0px; }
		to { top:50px; }
	}
	@-moz-keyframes aaa {
		from { top:0px; }
		to { top:50px; }
	}
	@keyframes aaa {
		from { top:0px; }
		to { top:50px; }
	}
}

<div class="my_test"></div>

如何在媒体查询中定义关键帧？

1 个答案: