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>