我正在尝试在我正在为学校制作的小型html游戏中使用css。 我是盲人并且使用屏幕阅读器进行编码，但是没有读出元素的样式。 我被告知我的所有内容都在屏幕一角的小矩形或正方形中。 我正在使用ng-animate，这也没有效果。 我做错了什么，我的所有选择器都匹配。 我的css：
body {
width: 100%;
height: 100%;}
#canvas{
bottom:0px;
}
.settings.ng-enter{
animation-name: expand;
animation-duration: 2s;
}
@keyframes expand {
0% {
margin-top : 50%;
margin-left : 50%;
margin-bottom : 50%;
margin-right : 50%;
width: 0%;
height: 0%;
}
100% {
margin-top : 0%;
margin-left : 0%;
margin-bottom : 0%;
margin-right : 0%;
width: 100%;
height: 100%;
}}
动画意味着从中心扩展到全屏，剩下的就是全屏，除了我尝试用js设置的画布是一个正方形，屏幕宽度是每边的长度。我尝试用css将它放在屏幕底部并再次将其宽度设置为屏幕宽度，但它没有做任何事情
答案 0 :(得分：2)
如果你只是想从中心到边缘动画到全屏，你可以试试这样的东西！
否则你可以尝试使用transform而不是margin（如果你需要这个解决方案 - 我可以在以后添加它。）
您还可以提供display: block班display: static，因为保证金：自动（这是使对象居中的正确解决方案）不适用于.wrapper {
position: relative;
width: 100%;
height: 100vh;
}
.container {
width: 100%;
height: 100vh;
background: black;
position: absolute;
top: 0;
left: 0;
animation-name: expand;
animation-duration: 4s;
}
@keyframes expand{
0% {
width: 0;
height: 0;
left: 50%;
top: 50%;
}
}
100%{
width: 100%;
height: 100vh;
left: 0;
top: 0;
}
}
<div class="wrapper">
<div class="container"></div>
</div>{{1}}