Question

在下面的示例中，您可以看到跳跃的方框，如何使转换顺利进行？

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite ease-out;
}

.box:nth-child(2) {
  animation-delay: 1.2s;
}

.box:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes updn {
  0% {
    transform: translateY(-10px) translateX(10px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}

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

Answer 1

看起来动画的开头和结尾之间的跳跃太大而导致跳跃。

这个CSS应该提高平滑度：

@keyframes updn {
      0% {
        transform: translateY(0px);
      }
      25% {
        transform: translateY(-5px) translateX(5px);
      }
      50% {
        transform: translateY(-10px) translateX(10px);
      }
      75% {
        transform: translateY(-5px) translateX(5px);
      }
      100% {
        transform: translateY(0px);
      }
    }

它的外观如下：

＆＃13;

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite ease-out;
}

.box:nth-child(2) {
  animation-delay: 1.2s;
}

.box:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes updn {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-5px) translateX(5px);
  }
  50% {
    transform: translateY(-10px) translateX(10px);
  }
  75% {
    transform: translateY(-5px) translateX(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

＆＃13;

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

＆＃13;

Answer 2

这个怎么样

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite ease-out;
}

.box:nth-child(2) {
  animation-delay: 1.2s;
}

.box:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes updn {
  0% {
    transform: translateY(0px) translateX(10px);
  }
  50% {
    transform: translateY(10px);
  }
  
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(1px) translateX(10px);
  }
}

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

Answer 3

如果你问我，0%上你的起点应该以{{1}}开头，但那只是我：

＆＃13;

0px

＆＃13;

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite ease-out;
}

.box:nth-child(2) {
  animation-delay: 1.2s;
}

.box:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes updn {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}

＆＃13;

Answer 4

1：您必须从transform: translateY(0px) translateX(0px)开始动画才能顺利过渡并

关键帧的transform和0%的

2： 100%值应相同

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite;
  animation-timing-function: linear;
}

.box:nth-child(2) {
  animation-delay: 1.2s;
}

.box:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes updn {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  25% {
    transform: translateY(-10px) translateX(-10px);
  }
  50% {
    transform: translateY(0px) translateX(0px);
  }
  75% {
    transform: translateY(10px) translateX(10px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}

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

Answer 5

每个animation-delay的增量.box，使用nth-child()选择它们以单独添加已添加的动画延迟，

＆＃13;

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite ease-out;
}
.box:nth-child(2){
  animation-delay:1s; /*This executes after 1st .box thus animation-delay for this should be 1s (i.e. overall animation time) */
}
.box:nth-child(3){
  animation-delay:2s; /*This executes after 2nd .box thus animation-delay for this should be 1s + 1s (i.e. overall animation time + delay of 2nd child) */
}
@keyframes updn {
  0% {
    transform: translateY(-10px) translateX(10px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}

＆＃13;

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

＆＃13;

如何使这个css动画流畅

5 个答案: