代码之家 › 专栏 › 技术社区 › niklas

Css顺序动画搞砸了

sequential css-animations css

niklas · 技术社区 · 8 年前

我想实现一个连续的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>

1 回复 | 直到 8 年前

Quentin 8 年前

这是因为你必须设置两者 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>

推荐文章

lineage · docker中五彩纸屑的代码是什么/欢迎来到docker?[关闭]

1 年前

mini1012 · 关键帧css中百分比之间的延迟

1 年前

Fernandossmm · element.animate()使用关键帧似乎忽略了放松功能

2 年前

goalTosin · 当一个项目被删除时,我如何设置侧边栏项目向上滑动的动画?

2 年前

Dan · 如何设置重置变换的动画:使用CSS关键帧旋转?

3 年前

Dan · 如何使用Tailwind创建动画序列?

3 年前

Thomas Pötz · CSS伪元素的翻译速度快于主元素

3 年前

Morteza M · 在连续旋转中更改CSS动画持续时间

3 年前

Chris Dk · 为什么我的html元素在动画后会消失

3 年前

dododdo · 看到对象后在css中的动画

3 年前