CSS Keyframes动画问题求助：元素路径异常且超出容器

你的问题主要出在定位关系错误和关键帧位置计算错误这两点，以下是具体修正方案：

核心问题分析 #

1. 定位基准错误：.box用了position: relative，它的top/left是相对于自身初始位置计算，而非父容器#container，导致元素不受容器约束。
2. 关键帧位置偏差：
   • 设置left: 100%时，元素的左边缘会对齐容器右边缘，由于元素自身有100px宽度，右半部分会直接超出容器。
   • 75%关键帧用right: 100%完全错误：这个属性是让元素右边缘距离容器右边缘为容器的100%宽度，相当于把元素整体移到容器左侧外面，这就是你看到“差一点到左下角”的原因。
3. 动画过渡突兀：错误的关键帧位置导致元素从异常位置跳回起点，出现奇怪的返回路径。

修正后的代码（方案一：使用calc计算位置） #

#container{
    width: 800px;
    height: 800px;
    border: 1px solid red;
    position: relative; /* 改为relative，作为内部absolute元素的定位基准 */
}

.box{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: black;
    border-radius: 50%;
    position: absolute; /* 改为absolute，相对于容器定位 */
    top: 0;
    left: 0;
    animation-name: slideme;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; /* 匀速动画，移动更平滑 */
}

@keyframes slideme{
    0%{
        top: 0;
        left: 0;
    }
    25%{
        /* 右上角：容器宽度减去元素自身宽度，让元素右边缘贴合容器右边缘 */
        left: calc(100% - 100px);
        top: 0;
    }
    50%{
        /* 右下角：同时减去宽高，贴合容器右下角 */
        left: calc(100% - 100px);
        top: calc(100% - 100px);
    }
    75%{
        /* 左下角：top减去自身高度，贴合容器左下角 */
        left: 0;
        top: calc(100% - 100px);
    }
    100%{
        left: 0;
        top: 0;
    }
}

更灵活的方案（方案二：使用transform，无需硬写元素宽高） #

如果后续修改元素尺寸，这个方案不用同步修改关键帧数值：

#container{
    width: 800px;
    height: 800px;
    border: 1px solid red;
    position: relative;
    overflow: hidden; /* 可选，彻底隐藏可能的溢出部分 */
}

.box{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: slideme;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes slideme{
    0%{
        transform: translate(0, 0);
    }
    25%{
        left: 100%;
        top: 0;
        transform: translateX(-100%); /* 向左移动自身宽度，让右边缘贴合容器 */
    }
    50%{
        left: 100%;
        top: 100%;
        transform: translate(-100%, -100%); /* 同时向左、向上移动自身宽高 */
    }
    75%{
        left: 0;
        top: 100%;
        transform: translateY(-100%); /* 向上移动自身高度，让下边缘贴合容器 */
    }
    100%{
        left: 0;
        top: 0;
        transform: translate(0, 0);
    }
}

额外说明 #

• animation-timing-function: linear可以让动画全程匀速，避免默认ease带来的快慢不均问题。
• 方案二中的overflow: hidden可以确保元素在动画过程中完全被容器包裹，不会出现边缘溢出的视觉瑕疵。

内容的提问来源于stack exchange，提问作者H3llo-World-Dev