CSS使用@keyframes实现圆形沿正方形路径移动异常及定位问题咨询

1. 圆形运动方向异常的原因 #

你写的@keyframes规则存在两个核心错误，直接导致运动路径不符合预期：

• 混用对立定位属性：同一元素同时设置left/right、top/bottom时，CSS会优先以权重更高的属性为准，且前一个关键帧设置的定位属性不会自动重置，会和后续关键帧的属性产生冲突。比如你0%设置了left:0，25%又设置right:90%，两个属性同时生效，元素的水平位置计算逻辑会完全混乱。
• 关键帧路径逻辑错误：你设置的四个关键帧位置没有遵循正方形四条边的顺时针/逆时针顺序，且数值计算不符合容器尺寸：父容器宽高400px，子元素宽高100px，要贴合父容器边界移动的话，最大偏移量应为300px（即75%），你设置的90%、75%等数值对应的位置本身就不在正方形边界上。

2. 父级card容器是否需要设置position: relative #

必须设置。
你当前的子元素.box用的是position: relative，定位基准是自身原本在文档流中的位置，而非父容器边界；如果要让子元素的偏移完全以card容器的左上角为基准，需要做两个修改：

• 给.card添加position: relative，将其设置为子元素的定位上下文
• 将.box的position改为absolute，这样top/left的偏移值才会相对于card的边界计算

3. 修正后的完整代码 #

.card{
  height: 400px;
  width: 400px;
  border: 2px dashed black;
  margin: 20px 20%;
  /* 新增：设置为定位上下文 */
  position: relative;
}
.box
{
  height: 100px;
  width: 100px;
  border: 2px solid black;
  border-radius : 50%;
  background-color: red;
  animation-name: slide;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  /* 修改：相对于父容器绝对定位 */
  position: absolute;
  top: 0;
  left: 0;
}
@keyframes slide{
  /* 左上角 */
  0% {
    top: 0;
    left: 0;
  }
  /* 右上角 */
  25% {
     top: 0;
     left: 75%;
  }
  /* 右下角 */
  50% {
    top: 75%;
    left: 75%;
  }
  /* 左下角 */
  75% {
    top: 75%;
    left: 0;
  }
  /* 回到左上角 */
  100% {
     top: 0;
     left: 0;
  }
}

<div class="card">
  <div class="box"></div>
</div>

4. 相关概念学习建议 #

可以通过分层练习理解定位和动画逻辑：

• 先单独练习四种定位属性（static/relative/absolute/fixed）的特性，给每个属性写独立demo，观察不同定位上下文下的偏移基准差异
• 写CSS动画时，同一维度的偏移尽量只用一个属性控制，比如水平方向统一用left，垂直方向统一用top，避免属性冲突
• 写路径动画前先手动算好每个关键帧的坐标，确认逻辑通顺后再写代码

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