为什么旋转动画会影响容器的位置？答案

【问题标题】：Why does a rotation animation influence the position of a container?为什么旋转动画会影响容器的位置？
【发布时间】：2017-10-31 20:53:26
【问题描述】：

我尝试在我的网页上制作一个旋转的圆圈加载图标，如下所示：

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”）不会放在中间。

你能帮帮我吗？

【问题讨论】：

因为您的动画覆盖原始变换。
好的，谢谢

标签： html css animation css-animations

【解决方案1】：

这是因为动画覆盖了

transform: translateX(-50%) translateY(-50%);

从您的元素中，修复它也在动画中添加...

body{
  background:blue;
}
@keyframes spin {
    0% {transform: translateX(-50%) translateY(-50%) rotate(0deg) }
    100% {transform: translateX(-50%) translateY(-50%) 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;

}

<div id="spinningCircleBox">
        <!--div id="circleBlockMask">
            <div id="spinningCircle"></div>
        </div-->
    </div>
<div id="circleWrapper"></div>

【讨论】：

我不知道。感谢您的回答，我会尽快选择您的答案。