html - 浏览器缩放时 CSS 调整大小不一致

Question

我正在制作一个简单的 CSS 动画，遇到了一个奇怪的问题。

当为几个小 div 设置动画时，如果我在 Chrome/Firefox 上放大或缩小，div 的高度会变得不一致 - 尽管它们都共享相同的大小样式。

有什么方法可以使用 CSS 来解决这个问题吗？我希望条形图在不考虑缩放级别的情况下保持一致的高度。我意识到这是一个边缘案例，但我想涵盖尽可能多的基础!

例子是 here .

HTML

<div class='animation-box animate'>
  <div class="animation-bar"></div>
  <div class="animation-bar"></div>
  <div class="animation-bar"></div>
  <div class="animation-bar"></div>
</div>

CSS

.animation-box {
  width: 100px;
}

.animation-bar {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: bargraph;
  animation-timing-function: linear;
  background-color: #0d97c1;
  height: 3px;
  margin: 2px;
}

@keyframes bargraph {
  0% {
    width: 100%;
  }
  50% {
    width: 10%;
  }
  100% {
    width: 100%;
  }
}

Answer 1

只有一个元素和更少代码的简化怎么样:

.animation-bar {
  animation: bargraph 1.5s infinite linear alternate;
  width: 100px;
  height: 25px;
  background-image: linear-gradient(#0d97c1 50%, transparent 50%);
  background-position:0 0;
  background-size: 100% 5px;
  background-repeat: repeat-y;
}

@keyframes bargraph {
  0% {
    background-size: 100% 5px;
  }
  100% {
    background-size: 10% 5px;
  }
}

<div class="animation-bar"></div>