当元素旋转时,它不在中间并移动。
CSS:
div {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border: 16px solid rgb(235, 235, 235);
border-top: 16px solid rgb(83, 83, 192);
border-radius: 50%;
animation: loading 2s linear infinite;
transition-property: transform;
transform: translate(-50% , -50%);}
@-moz-kayframes loading {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
和HTML:
<div></div>
问题是您正在使用transform: translate(-50% , -50%);
将元素居中,但在@keyframes
中,您会被transform
覆盖rotation()
,从而覆盖了translate()
。如果您也将translate()
放到动画中,由于origin
(旋转的锚点)每帧都不同,因此div也会旋转。
因此,您可以:1)以left
和top
为中心,如下所示:
div {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
border: 16px solid rgb(235, 235, 235);
border-top: 16px solid rgb(83, 83, 192);
border-radius: 50%;
animation: loading 2s linear infinite;
/*transform: translate(-50% , -50%);*/
}
@keyframes loading {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div></div>
2)或使用一些父元素将居中,并且动画div将位于其中。
.child {
width: 100px;
height: 100px;
border: 16px solid rgb(235, 235, 235);
border-top: 16px solid rgb(83, 83, 192);
border-radius: 50%;
animation: loading 2s linear infinite;
}
.parent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
@keyframes loading {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div class="parent">
<div class="child"></div>
</div>
+我已删除transition-property
,因为您不需要它。您正在使用animation
而不是transition
。