CSS/SVG动画效果-三个弹跳方-正确的时间

Question

我基本上是在尝试重现这些跳跃圈的时机：

https://dribbble.com/shots/2991038-Typing-Status

所有三个圆圈都以相同的速度跳跃，但第一个圆直到第三个圆圈落地时才重新开始。为了我的生命，我不能正确地延迟每一个圆圈来得到正确的时机。当第一个圆圈跳到一半的时候，我就会跳到第二个圆圈的位置，但是我不能把第一个圆跳到第三个圆圈着陆后开始的地方。或许我的宽松政策需要调整，也需要时机调整？

来源：https://jsfiddle.net/88ybodjk/

​

@keyframes jump {
  0% {
    transform: translateY(0px);
  }
  33% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0px);
  }
}

.square-1 {
  animation: jump 2s ease infinite;
}

.square-2 {
  animation: jump 2s .6s ease infinite;
}

.square-3 {
  animation: jump 2s 1.2s ease infinite;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 50" style="padding-top: 100px;">
      <rect class="square-1" x="0" width="50" height="50" style="fill:tomato"/>
    
      <rect class="square-2" x="60" width="50" height="50" style="fill:tomato"/>
      
      <rect class="square-3" x="120" width="50" height="50" style="fill:tomato"/>
    
    </svg>

​

Answer 1

假设你同时只想要一个“空中”的圆圈。

然后，应用过渡的关键帧必须只覆盖33%。

这意味着：

​

@keyframes jump {
  0% {
    transform: translateY(0px);
  }
  16.5% {
    transform: translateY(-12px);
  }
  33%, 100% {
    transform: translateY(0px);
  }
}

.square-1 {
  animation: jump 2s ease infinite;
}

.square-2 {
  animation: jump 2s .6s ease infinite;
}

.square-3 {
  animation: jump 2s 1.2s ease infinite;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 50" style="padding-top: 100px;">
      <rect class="square-1" x="0" width="50" height="50" style="fill:tomato"/>
    
      <rect class="square-2" x="60" width="50" height="50" style="fill:tomato"/>
      
      <rect class="square-3" x="120" width="50" height="50" style="fill:tomato"/>
    
    </svg>

​

然而，由于放松，这并没有给出正确的假象。

最好是稍微增加过渡部分的持续时间。

​

@keyframes jump {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-12px);
  }
  50%, 100% {
    transform: translateY(0px);
  }
}

.square-1 {
  animation: jump 2s ease infinite;
}

.square-2 {
  animation: jump 2s .6s ease infinite;
}

.square-3 {
  animation: jump 2s 1.2s ease infinite;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 50" style="padding-top: 100px;">
      <rect class="square-1" x="0" width="50" height="50" style="fill:tomato"/>
    
      <rect class="square-2" x="60" width="50" height="50" style="fill:tomato"/>
      
      <rect class="square-3" x="120" width="50" height="50" style="fill:tomato"/>
    
    </svg>

​