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-enter 클래스 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>