1
私はそうのように私のWebページ上で回転する円ローディングアイコンを作ってみました：回転アニメーションがコンテナの位置に影響するのはなぜですか？
CSS：
@keyframes spin {
0% {transform: rotate(0deg); }
100% {transform: rotate(360deg); }
}
div#spinningCircleBox {
width: 6.25vw;
height: 6.25vw;
position: fixed;
background-color: rgba(255, 255, 255, 0);
left: 50vw;
top: 50vh;
transform: translateX(-50%) translateY(-50%);
box-sizing: border-box;
animation: spin 1s infinite linear;
border: solid 1px red;
}
div#circleBlockMask {
width: 3.125vw;
height: 3.125vw;
position: fixed;
box-sizing: border-box;
left: 0;
top: 0;
overflow: hidden;
}
div#spinningCircle {
width: 6.25vw;
height: 6.25vw;
position: relative;
border: solid 8px aliceblue;
background-color: rgba(255, 255, 255, 0);
border-radius: 10vw;
box-sizing: border-box;
left: 0;
top: 0;
}
div#circleWrapper {
width: 6.5vw;
height: 6.5vw;
box-sizing: border-box;
border: solid 12px white;
border-radius: 10vw;
left: 50vw;
top: 50vh;
position: fixed;
transform: translateX(-50%) translateY(-50%);
border: solid 1px yellow;
}
HTML：
<body>
[...]
<div id="spinningCircleBox">
<!--div id="circleBlockMask">
<div id="spinningCircle"></div>
</div-->
</div>
<div id="circleWrapper"></div>
[...]
</body>
しかし、何が起こるかであるアニメーション作品が、「動きます"'spinningCircleBox'は離れています。あなたが黄色のボックス（私は「circleWrapper」と呼んで、それが違いを示すためにだけあります）途中で正しく整列されるが、垂直方向と水平方向中央にあることがわかります
：私は、スクリーンショットを添付しました。
spinningCircleBoxのスピンアニメーションを無効にすると、正しく整列されますが、何らかの理由で（そしてそれが私の質問です）、アニメーションを有効にして、コンテナ（「spinningCircleBox」）が中央に配置されません。
私を助けてもらえますか？アニメーションは、あなたの要素から
transform: translateX(-50%) translateY(-50%);
に上書きされ、それはアニメーションにも追加修正するために何が起こっている
ので、アニメーション**は元の変換を上書きします。 –
そうです、ありがとう –