CSS3 анимация дрожит

Question

Я сейчас создаю интерактивную карту, у меня есть различные анимированные элементы, над которыми я сейчас работаю. Однако я заметил, что анимации слегка подпрыгивают / дрожат, пока они анимируются.

Здесь вы можете увидеть мой кодовый блок

У кого-нибудь есть идеи, почему они слегка дрожит? Я проверил все браузеры, встряхивание минимально, но все равно дает эффект!

@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

Это связано с тем, что расстояние до аэростата и время анимации не совпадают c.

например. вам нужно проехать 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>