Css 变换原点，使动画不'；不要跳

我已经创建了一个动画微调器，它是使用背景渐变制作的“比萨饼片”构建的。问题是我不知道起源是什么。动画一直在跳跃

看小提琴：

我怎样才能摆脱跳跃呢

HTML:

---

我稍微修改了你的代码。首先，我添加了一个container div并简单地旋转了它

HTML:

---

太神了谢谢！还有一个问题：您是否知道这些值与容器的大小#hold和.slice之间的关系？现在旋转器相当大。我用更少的代码编写代码，希望使用很少的变量来控制组件，但有些值（即.slices.bar div中的transform origin…）在我看来只是随机值。好的，我简化了代码，现在看起来更清晰了。但作为一个完美主义者，我们必须提到，这些线条并没有完全对齐。知道怎么解决吗？白线？老实说，不是真的。我试着摆弄切片的边距，这确实重新定位了它们，但我发现只要一半的馅饼对齐，另一半就没有对齐，而且馅饼之间的距离越来越远。我个人认为这应该归咎于CSS呈现的局限性。对不起，我帮不上什么忙了：（没问题，我还是很感谢你的帮助！因为我用了一个中间顶部的白色蒙版圆圈使它看起来是空心的，并将它调整为较小的尺寸，我几乎看不到任何问题。）

<div class="slices bar">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.slices {
    width:100px;
    height:100px;
    position:relative;
    transform-origin: right bottom;
    -webkit-animation: spin 2.8s infinite steps(8);
    -moz-animation: spin 2.8s infinite steps(8);
    -ms-animation: spin 2.8s infinite steps(8);
    -o-animation: spin 2.8s infinite steps(8);
    animation: spin 2.8s infinite steps(8);
}
.slices.bar div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 35px;
    left: 45px;
    border-radius: 50%;
    background: linear-gradient(45deg, #CDCDCD 50%, transparent 50%) 0 0;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    transform-origin: 56px 52px;
    /* container height / 2 */
}
@-webkit-keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
@-moz-keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
@-ms-keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
.slices.bar div:nth-child(1) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    background: linear-gradient(45deg, red 50%, transparent 50%) 0 0;
    background-repeat: no-repeat;
    background-size: 50% 50%;
}
.slices.bar div:nth-child(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.slices.bar div:nth-child(3) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.slices.bar div:nth-child(4) {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.slices.bar div:nth-child(5) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.slices.bar div:nth-child(6) {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
.slices.bar div:nth-child(7) {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}
.slices.bar div:nth-child(8) {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}

<div id='hold'>
    <div class="slices bar">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

.slices {
    width:100px;
    height:100px;
    position:relative;
    margin-top: -31px;
    margin-left: -45px;
    transform-origin: right bottom;
    /*-webkit-animation: spin 2.8s infinite steps(8);
    -moz-animation: spin 2.8s infinite steps(8);
    -ms-animation: spin 2.8s infinite steps(8);
    -o-animation: spin 2.8s infinite steps(8);
    animation: spin 2.8s infinite steps(8);*/
}
#hold {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: hidden;
    -webkit-animation: spin 2.8s infinite steps(8);
    -moz-animation: spin 2.8s infinite steps(8);
    -ms-animation: spin 2.8s infinite steps(8);
    -o-animation: spin 2.8s infinite steps(8);
    animation: spin 2.8s infinite steps(8);
}
.slices.bar div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 35px;
    left: 45px;
    border-radius: 50%;
    background: linear-gradient(45deg, #CDCDCD 50%, transparent 50%) 0 0;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    transform-origin: 56px 52px;
    /* container height / 2 */
}
@-webkit-keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
@-moz-keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
@-ms-keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
.slices.bar div:nth-child(1) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    background: linear-gradient(45deg, red 50%, transparent 50%) 0 0;
    background-repeat: no-repeat;
    background-size: 50% 50%;
}
.slices.bar div:nth-child(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.slices.bar div:nth-child(3) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.slices.bar div:nth-child(4) {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.slices.bar div:nth-child(5) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.slices.bar div:nth-child(6) {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
.slices.bar div:nth-child(7) {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}
.slices.bar div:nth-child(8) {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}