CSS动画循环问题：需实现从终点直接跳转回起点

当前实现的CSS动画中，圆形元素按左上→右上→右下→左下的路径移动，完成序列后会沿反向路径回到左上。需求是让元素从最后一个位置（左下）直接跳转至起点，而非原路返回。

现有HTML结构：

<div class="cir"></div>

现有CSS代码：

.cir {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 10px solid black;
    position: absolute;
    top:0;
    left:0;
    animation-name: slideMe;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function:linear;
}
@keyframes slideMe {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 0;
        left: 85%;
    }
    50% {
        top: 85%;
        left: 85%;
    }
    100% {
        top: 85%;
        left: 0;
    }
}

解决方案 #

要实现从终点直接跳转回起点，只需调整关键帧逻辑并移除反向播放设置：

修改后的CSS代码：

.cir {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 10px solid black;
    position: absolute;
    top:0;
    left:0;
    animation-name: slideMe;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    /* 移除animation-direction: alternate，保持动画正向循环 */
}
@keyframes slideMe {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 0;
        left: 85%;
    }
    50% {
        top: 85%;
        left: 85%;
    }
    99.9% {
        /* 让元素停留在左下位置直到动画接近结束 */
        top: 85%;
        left: 0;
    }
    100% {
        /* 动画结束瞬间直接跳回起点 */
        top: 0;
        left: 0;
    }
}

逻辑说明 #

• 去掉animation-direction: alternate，避免动画完成后反向播放
• 通过拆分关键帧，让元素在99.9%时仍停留在左下终点，100%瞬间切换到左上起点，实现无过渡的直接跳转，精准匹配需求

内容的提问来源于stack exchange，提问作者Whitenerius