的CSS似乎没有任何效果

Question

我试图在一个小的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屏幕的底部，并重新设置其宽度以适合屏幕宽度，但它不会做任何事情

Answer 1

你可以尝试这样的事情藏汉如果你只是想从中心到动画到边缘进入全屏！

否则，你可以尝试使用变换，而不是利润（如果你需要这个解决方案 - 我可以添加它）。

你也可以给你的.ng-enterdisplay: 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>