Css semblant n'avoir aucun effet

Question

J'essaye d'utiliser css dans un petit jeu html que je fais pour l'école. Je suis aveugle et utilise un lecteur d'écran pour coder, mais le style d'un élément n'est pas lu. On m'a dit que tout mon contenu est dans un petit rectangle ou un carré dans le coin de l'écran. J'utilise ng-animate qui n'a pas non plus d'effet. Qu'est-ce que je fais de mal, tous mes sélecteurs correspondent. Mon 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%; 
}} 

L'animation vise à développer du centre en plein écran, le reste est censé être plein écran en dehors de la toile que je mise essayées avec js être un carré avec une largeur d'écran étant la longueur de chaque côté. J'ai essayé de le placer en bas de l'écran avec le css et en réglant à nouveau sa largeur sur la largeur de l'écran mais ça ne fait rien

Answer 1

Vous pouvez essayer quelque chose comme ça si vous voulez juste animer depuis le centre aux bords en plein écran! Sinon, vous pourriez essayer d'utiliser la transformation au lieu des marges (si vous avez besoin de cette solution, je peux l'ajouter plus tard).

vous pouvez également donner votre .ng-enter classe display: block depuis margin: auto (ce qui serait la bonne solution pour centrer un objet) ne fonctionne pas avec 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>