是否有办法防止 CSS 动画在每个循环完成后重置？我希望它从以前的位置开始，而不是从初始位置开始。
@keyframes spin{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(180deg);
}
100%{
transform:rotate(180deg);
}
}
.spinning{
position: absolute;
height:50px;
width:50px;
top:100px;
left:100px;
background-color: lightgrey;
border-radius: 50%;
animation: spin 2s linear infinite;
}
.spinning::after{
content:'';
position:absolute;
height:10px;
width:10px;
border-radius:50%;
background-color:red;
top:-5px;
left:20px;
}<!-- begin snippet: js hide: false console: false babel: false -->
<html>
<head>
<link rel="" href="">
</head>
<body>
<div class="spinning"></div>
</body>
</html>如您所见，每次旋转后，红点都会重置到圆圈的顶部，但这不是我想要的，我希望它从圆圈的顶部开始旋转，然后是底部，然后是顶部，然后底部等等。 我的英语说得不好，我希望你明白我想说的。
最佳答案
由于最后一个 关键帧 位于 180deg，因此该点移回原始位置 (0%)。要使其完成整个圆圈，您必须在 360deg 处结束。所以它仍然在重置，但由于 360deg 和 0deg 在技术上是相同的位置，你不会看到这个“过渡”。
@keyframes spin {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
.spinning {
position: absolute;
height: 50px;
width: 50px;
top: 100px;
left: 100px;
background-color: lightgrey;
border-radius: 50%;
animation: spin 4s linear infinite forwards;
}
.spinning::after {
content: '';
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: red;
top: -5px;
left: 20px;
}<div class="spinning"></div>关于html - 如何防止 CSS 动画在每个循环后重置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52545735/