时间戳

首页 > 解决方案 > CSS3 动画在晃动

html - CSS3 动画在晃动

问题描述

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

你可以在这里看到我的代码笔

有谁知道为什么他们会轻微颤抖？我检查了所有浏览器，抖动很小但仍然有效！

@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>

标签： htmlcssanimation

解决方案

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

例如。您必须行驶 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>

推荐阅读