的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>