Question

我在HTML / CSS中有这个动画。动画中的最后一个正方形为绿色，我试图制作它，以便每次绿色方块在最后一次动画循环播放之前出现。因为在目前的状态下它总是出现在最后的广场上！

HTML：

<div class="loader">
  <div class="square" ></div>
  <div class="square"></div>
  <div class="square last"></div>
  <div class="square clear"></div>
  <div class="square"></div>
  <div class="square last"></div>
  <div class="square clear"></div>
  <div class="square "></div>
  <div class="square last"></div>
</div>

CSS

@-webkit-keyframes enter {
  0% {
    opacity: 0;
    top: -10px;
  }
  5% {
    opacity: 1;
    top: 0px;
  }
  50.9% {
    opacity: 1;
    top: 0px;
  }
  55.9% {
    opacity: 0;
    top: 10px;
  }
}
@keyframes enter {
  0% {
    opacity: 0;
    top: -10px;
  }
  5% {
    opacity: 1;
    top: 0px;
  }
  50.9% {
    opacity: 1;
    top: 0px;
  }
  55.9% {
    opacity: 0;
    top: 10px;
  }
}
@-moz-keyframes enter {
  0% {
    opacity: 0;
    top: -10px;
  }
  5% {
    opacity: 1;
    top: 0px;
  }
  50.9% {
    opacity: 1;
    top: 0px;
  }
  55.9% {
    opacity: 0;
    top: 10px;
  }
}
body {
  background: #1fbeca;
}

* {
  margin: 0;
}

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -27.5px;
  margin-top: -27.5px;
}

.square {
  background: white;
  width: 15px;
  height: 15px;
  float: left;
  top: -10px;
  margin-right: 5px;
  margin-top: 5px;
  position: relative;
  opacity: 0;
  -webkit-animation: enter 6s infinite;
  animation: enter 6s infinite;
}

.enter {
  top: 0px;
  opacity: 1;
}

.square:nth-child(1) {
  -webkit-animation-delay: 1.8s;
  -moz-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

.square:nth-child(2) {
  -webkit-animation-delay: 2.1s;
  -moz-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

.square:nth-child(3) {
  -webkit-animation-delay: 2.4s;
  -moz-animation-delay: 2.4s;
  animation-delay: 2.4s;
  background: #fdc96f;
}

.square:nth-child(4) {
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.square:nth-child(5) {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.square:nth-child(6) {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.square:nth-child(8) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.square:nth-child(9) {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.clear {
  clear: both;
}

.last {
  margin-right: 0;
}

这是一个链接：https://codepen.io/dghez/pen/Czuqn

Answer 1

每次进入＆＃39;以获得彩色方形移位。动画运行，创建一个新的动画，其长度是＆＃39;输入＆＃39;动画。

这个长度的原因是9个方格中的每一个都需要动画一次完整的＆＃39;输入＆＃39;动画。

9个方格x 6s = 54s 。

对于此动画的1/9（大约11％），我们更改了方形的颜色。

@keyframes squarecolor {
  0%, 11.1%   { 
    background-color: #fdc96f;
  }
  11.2%, 100%   { 
    background-color: white;
  }
}

然后，将此动画应用于每个方块，就像输入＆＃39;动画。但是，每个方格应以6s的增量逐步延迟。

这里是link to an updated version of your Codepen。

Answer 2

您可以通过使用第二个动画来实现效果，该动画一次将一个正方形更改为黄色，表示动画的整个循环。

在第一个动画运行所有9个方格（6s * 9 = 54s）后，第二个动画循环，并且每个方格延迟到6s的某个间隔，以与相应的循环对齐，它应该是黄色。

＆＃13;

@-webkit-keyframes enter {
  0% {
    opacity: 0;
    top: -10px;
  }
  5% {
    opacity: 1;
    top: 0px;
  }
  50.9% {
    opacity: 1;
    top: 0px;
  }
  55.9% {
    opacity: 0;
    top: 10px;
  }
}
@keyframes enter {
  0% {
    opacity: 0;
    top: -10px;
  }
  5% {
    opacity: 1;
    top: 0px;
  }
  50.9% {
    opacity: 1;
    top: 0px;
  }
  55.9% {
    opacity: 0;
    top: 10px;
  }
}
@-webkit-keyframes change {
  0% {
    background: #fdc96f;
  }
  11.11% {  /* one 6s frame in a 54s animation (6/54 = .1111) */
    background: #fdc96f;
  }
  11.12% {
    background: white;
  }
  100% {
    background: white;
  }
}
@keyframes change {
  0% {
    background: #fdc96f;
  }
  11.11% {
    background: #fdc96f;
  }
  11.12% {
    background: white;
  }
  100% {
    background: white;
  }
}
body {
  background: #1fbeca;
}

* {
  margin: 0;
}

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -27.5px;
  margin-top: -27.5px;
}

.square {
  background: white;
  width: 15px;
  height: 15px;
  float: left;
  top: -10px;
  margin-right: 5px;
  margin-top: 5px;
  position: relative;
  opacity: 0;
}

.enter {
  top: 0px;
  opacity: 1;
}

.square:nth-child(1) {
  -webkit-animation: enter 6s 1.8s infinite, change 54s 12s infinite;
  animation: enter 6s 1.8s infinite, change 54s 12s infinite;
}

.square:nth-child(2) {
  -webkit-animation: enter 6s 2.1s infinite, change 54s 6s infinite;
  animation: enter 6s 2.1s infinite, change 54s 6s infinite;
}

.square:nth-child(3) {
  -webkit-animation: enter 6s 2.4s infinite, change 54s infinite;
  animation: enter 6s 2.4s infinite, change 54s infinite;
}

.square:nth-child(4) {
  -webkit-animation: enter 6s 0.9s infinite, change 54s 30s infinite;
  animation: enter 6s 0.9s infinite, change 54s 30s infinite;
}

.square:nth-child(5) {
  -webkit-animation: enter 6s 1.2s infinite, change 54s 24s infinite;
  animation: enter 6s 1.2s infinite, change 54s 24s infinite;
}

.square:nth-child(6) {
  -webkit-animation: enter 6s 1.5s infinite, change 54s 18s infinite;
  animation: enter 6s 1.5s infinite, change 54s 18s infinite;
}

.square:nth-child(7) {
  -webkit-animation: enter 6s infinite, change 54s 48s infinite;
  animation: enter 6s infinite, change 54s 48s infinite;
}

.square:nth-child(8) {
  -webkit-animation: enter 6s 0.3s infinite, change 54s 42s infinite;
  animation: enter 6s 0.3s infinite, change 54s 42s infinite;
}

.square:nth-child(9) {
  -webkit-animation: enter 6s 0.6s infinite, change 54s 36s infinite;
  animation: enter 6s 0.6s infinite, change 54s 36s infinite;
}

.clear {
  clear: both;
}

.last {
  margin-right: 0;
}

＆＃13;

<div class="loader">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square last"></div>
  <div class="square clear"></div>
  <div class="square"></div>
  <div class="square last"></div>
  <div class="square clear"></div>
  <div class="square "></div>
  <div class="square last"></div>
</div>

＆＃13;

笔：https://codepen.io/straker/pen/mqdzMw

将动画添加到动画

2 个答案: