CSS3动画摇摆不定

Question

我目前正在构建一个交互式地图，我有各种动画元素，我目前正在处理。然而，我注意到动画在动画时会轻微跳跃/抖动。

您可以查看我的codepen here

有没有人知道为什么他们会有轻微的抖动？我已经检查了所有的浏览器，抖动很小，但仍然有效果！

​

@charset "UTF-8";
html,
body {
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

* {
  box-sizing: border-box;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  outline: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.map-container {
  height: 100%;
  width: 100%;
}

.map {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.desk-map {
  position: relative;
  overflow: hidden;
}

.animations>div {
  position: absolute;
}

.balloon-1 {
  width: 4.5%;
  height: 9%;
  background-image: url("https://www.ec-projects.co.uk/map/balloon-1.png");
  background-repeat: no-repeat;
  left: 12%;
  top: 14%;
  z-index: 1;
  animation: balloon1 14s infinite linear;
}

@keyframes balloon1 {
  0% {
    left: 12%;
    top: 14%;
  }
  50% {
    left: 12%;
    top: 2.5%;
  }
  20% {
    left: 12%;
    top: 14%;
  }
}

.balloon-2 {
  width: 4.5%;
  height: 9%;
  background-image: url("https://www.ec-projects.co.uk/map/balloon-2.png");
  background-repeat: no-repeat;
  left: 6.5%;
  top: 21%;
  z-index: 1;
  animation: balloon2 14s infinite linear;
  animation-delay: 1s;
}

@keyframes balloon2 {
  0% {
    left: 6.5%;
    top: 21%;
  }
  50% {
    left: 6.5%;
    top: 15%;
  }
  20% {
    left: 6.5%;
    top: 21%;
  }
}

.car-1 {
  width: 1.5%;
  height: 1.5%;
  background-image: url(https://www.ec-projects.co.uk/map/car-1.png);
  background-repeat: no-repeat;
  right: 22%;
  bottom: 32.25%;
  z-index: 1;
  animation: car1 30s infinite linear;
  animation-delay: 1s;
  -webkit-backface-visibility: hidden;
}

@keyframes car1 {
  0% {
    right: 22%;
    bottom: 32.25%;
  }
  100% {
    right: 57.25%;
    bottom: -0.4%;
  }
}

<div class="map-container">
  <div class="map">
    <div class="desk-map">
      <img src="https://www.ec-projects.co.uk/map/map.png" />

      <div class="animations">
        <div class="balloon-1"></div>
        <div class="balloon-2"></div>

        <div class="car-1"></div>
      </div>
    </div>
  </div>
</div>

​

Answer 1

这是因为气球覆盖的距离和动画的时间不同步。

例如：你必须走100公里，你有100天的时间来走完这段距离，然后你的移动就会像慢速移动一样(停下来再移动)。如果你要跑100公里，你有10分钟的时间，那么你的运动就像跑步一样(快)。您必须在气球运动中调整这些计时。

请将css替换为下面更新的css并检查

另外请检查片断，调整动画时间，看看效果。你可以固定一个你认为顺畅的持续时间来满足你的需要。

​

@charset "UTF-8";

      html,
      body {
        -webkit-text-size-adjust: 100%;
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
      }

      * {
        box-sizing: border-box;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        outline: 0;
      }

      img {
        max-width: 100%;
        height: auto;
      }

      .map-container {
        height: 100%;
        width: 100%;
      }

      .map {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
      }

      .desk-map {
        position: relative;
        overflow: hidden;
        /*         background-image: url("background-image: uri('https://www.ec-projects.co.uk/map/map.png"); */
        background-color: #cccccc;
        height: 100%;
        width: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .animations>div {
        position: absolute;
      }


      .balloon-1 {
        width: 100%;
        height: 100%;
        background-image: url("https://www.ec-projects.co.uk/map/balloon-1.png");
        background-repeat: no-repeat;
        left: 20%;
        top: 5%;
        z-index: 1;
        backface-visibility: hidden;
        perspective: 1000;
        animation: balloon1 20s infinite linear;
      }

      @keyframes balloon1 {
        0% {
          transform: translateY(100%);
        }

        50% {
          transform: translateY(0)
        }

        100% {
          transform: translateY(100%)
        }
      }

      .balloon-2 {
        width: 100%;
        height: 100%;
        background-image: url("https://www.ec-projects.co.uk/map/balloon-2.png");
        background-repeat: no-repeat;
        left: 6.5%;
        top: 0;
        z-index: 1;
        backface-visibility: hidden;
        perspective: 1000;
        animation: balloon2 30s infinite linear;
        animation-delay: .5s;
      }

      @keyframes balloon2 {
        0% {
          transform: translateY(100%)
        }

        50% {
          transform: translateY(0)
        }

        100% {
          transform: translateY(100%)
        }
      }

      .car-1 {
            width: 6%;
          height: 10%;
        background-image: url(https://www.ec-projects.co.uk/map/car-1.png);
        background-repeat: no-repeat;
        z-index: 1;
       animation: car1 10s infinite linear;
       animation-delay: 1s;
        -webkit-backface-visibility: hidden;
      }

      @keyframes car1 {
         0% {
    right: 22%;
    bottom: 32.25%;
  }
  100% {
    right: 57.25%;
    bottom: -0.4%;
  }
      }

<div class="map-container">
        <div class="map">
          <div class="desk-map">
            <img src="https://www.ec-projects.co.uk/map/map.png" />

            <div class="animations">
              <div class="balloon-1"></div>
              <div class="balloon-2"></div>

              <div class="car-1"></div>
            </div>
          </div>
        </div>
      </div>

​