实现圆形CSS动画：按左上→右上→右下→左下→左上路径移动

直接修改你的代码就能实现需求，关键是补全@keyframes的关键帧，并添加循环动画的属性：

/* 给父元素设置相对定位，让圆形相对于它定位 */
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
}

.box {
  width: 300px;
  height: 300px;
  border: 10px solid black;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: slideme;
  animation-duration: 7s;
  /* 设置动画无限循环 */
  animation-iteration-count: infinite;
  /* 保持动画过渡的平滑性 */
  animation-fill-mode: forwards;
}

/* 修正语法错误：去掉@keyframes后面的分号 */
@keyframes slideme {
  /* 初始位置：左上 */
  0% {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
  }
  /* 右上 */
  25% {
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
  }
  /* 右下 */
  50% {
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
  }
  /* 左下 */
  75% {
    bottom: 0;
    left: 0;
    top: auto;
    right: auto;
  }
  /* 回到左上，完成循环 */
  100% {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
  }
}

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

关键说明： #

• 修复了@keyframes slideme后面多余的分号，这是语法错误，会导致动画完全失效
• 添加animation-iteration-count: infinite让动画持续循环执行
• 在@keyframes里按25%的时间间隔定义四个关键位置，确保圆形严格按照你需要的路径移动
• 给body设置相对定位和最小高度，避免圆形因视口高度不足出现定位异常

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