Css 顺序动画搞砸了

Question

我想实现连续 css 动画，其中一个 div 围绕另一个 div 的边界移动。两个方向（从下到上和从右到左）有效，其他方向似乎混淆了。

我的密码是

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
body {
  background: #000;
}
.box-outer {
  overflow: hidden;
  margin: 50px auto;
  width: 200px;
  height: 200px;
}
.main_box {
  width: 200px;
  height: 200px;
  position: relative;
  background: #f34c4c;
  border: 10px solid #000;
}
.bar {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  top: -10px;
  left: -10px;
  animation-name: move-right, move-down, move-left, move-up;
  animation-delay: 0, 2s, 4s, 6s;
  animation-duration: 2s, 2s, 2s, 2s;
  animation-iteration-count: infinite, infinite, infinite, infinite;
}

@keyframes move-right {
  0% {
    left: -10px;
  }
  25% {
    left: 100%;
  }
}
@keyframes move-down {
  26% {
    top: -10px;
  }
  50% {
    top: 100%;
  }
}
@keyframes move-left {
  51% {
    left: 100%;
  }
  75% {
    left: -10px;
  }
}
@keyframes move-up {
  76% {
    top: 100%;
  }
  99% {
    top: -10px;
  }
}

<div class="box-outer">
  <div class="main_box">
    <div class="bar"></div>
  </div>
</div>

Answer 1

这是因为您必须在每个关键帧中同时设置 top 和 left 值。
顺便说一句，你可以使用单个动画，而不是 4 个。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

body {
  background: #000;
}

.box-outer {
  overflow: hidden;
  margin: 50px auto;
  width: 220px;
  height: 220px;
}

.main_box {
  width: 220px;
  height: 220px;
  position: relative;
  background: #f34c4c;
  border: 10px solid #000;
}

.bar {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
}

.top {
  top: -10px;
  left: -10px;
  animation: move 4s infinite linear;
}

@keyframes move {
  0% {
    top: -10px;
    left: -10px;
  }
  25% {
    top: -10px;
    left: 200px;
  }
  50% {
    top: 200px;
    left: 200px;
  }
  75% {
    top: 200px;
    left: -10px;
  }
}

<div class="box-outer">
  <div class="main_box">
    <div class="bar top"></div>
  </div>
</div>

Css 顺序动画搞砸了

Css sequential animation messed up

css

sequential

css-animations