CSS 动画元素在晃动（无意）答案

【问题标题】：CSS Animated element is shaking (not intended)CSS 动画元素在晃动（无意）
【发布时间】：2021-01-28 23:01:40
【问题描述】：

我正在尝试创建一个预加载器，但由于某种原因，该元素有点晃动。

Codepen 链接：https://codepen.io/twan2020/pen/PobYyVm

我已尝试更改 transform 百分比，但无法正确设置。

如果我改变：

@keyframes borderScale {
  0% {
    border: 5px solid white;
  }
  50% {
    border: 5px solid #dddddd;
  }
  100% {
    border: 5px solid white;
  }
}

收件人：

@keyframes borderScale {
  0% {
    border: 5px solid white;
  }
  50% {
    border: 5px solid #dddddd;
  }
  100% {
    border: 5px solid white;
  }
}

震动消失了，但我需要那部分来制作动画。我怎样才能摆脱抖动？为什么会抖动？

【问题讨论】：

我真的不知道你在说什么，因为当我测试它时，它根本没有震动。它工作得很好。

标签： html css animation svg

【解决方案1】：

请改用box-shadow。更改动画中的边框宽度可能会导致抖动问题。因为边框占用了页面空间，但 box-shadow 没有。 box-shadow 总是比边框更适合动画。

body {
  background-color: #dddddd;
}

.svglogo {
  width: 60%;
  position: absolute;
  left: 50%;
  top: 15%;
  margin: 0 auto;
  margin-right: -50%;
  transform: translate(-50%, 15%);
  fill: #d0d0d0;
}

#loader-container {
  width: 200px;
  height: 200px;
  color: white;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border: 5px solid #dddddd;
  border-radius: 50%;
  -webkit-animation: borderScale 1s infinite ease-in-out;
  animation: borderScale 1s infinite ease-in-out;
}

#loadingText {
  font-family: "Panton";
  font-weight: bold;
  font-size: 2em;
  position: absolute;
  top: 35%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

@keyframes borderScale {
  0% {
    box-shadow: 0 0 0 5px white;
  }
  50% {
    box-shadow: 0 0 0 25px #dddddd;
  }
  100% {
    box-shadow: 0 0 0 5px white;
  }
}

<div id="loader-container">
  <svg class="svglogo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
    <path id="XMLID_1_" d="M36.5,0.2C35.6,0.1,34.8,0,33.8,0H21.3h-9.6c-0.4,0-0.8,0.4-0.8,0.8v7.9v7.1v4.6v3.3v4.6v6.4v6.9
        c0,0.4,0.4,0.8,0.8,0.8c0,0,0,0,0,0c0,0,0,0,0,0h0.2v0h0.3h2.1h4.3c0.4,0,0.8-0.4,0.8-0.8l0,0v-2.8l0,0c0-0.4-0.4-0.8-0.8-0.8
        c0,0,0,0,0,0c0,0,0,0,0,0h-2.5v0c-0.4,0-0.8-0.4-0.8-0.8v0v-1.2v-6.3v-4.7V17v-4V5.2c0,0,0,0,0,0c0,0,0,0,0,0c0-0.4,0.4-0.8,0.8-0.8
        v0h7.3h10.5c0.4,0,0.9,0,1.3,0.1c5.6,0.6,9.9,5.4,9.9,11.1c0,3.7-1.8,7-4.6,9c-1.8,1.4-4.1,2.2-6.6,2.2c0,0,0,0-0.1,0h-6h-3.6l0,0
        c-0.4,0-0.8,0.4-0.8,0.8c0,0,0,0,0,0c0,0,0,0,0,0v0.2l0,3c0,0,0,0,0,0s0,0,0,0l0,2.6l0,0v5l0,2l0,6.5l0,13c0,0.4,0.4,0.8,0.8,0.8
        h5.7h5.9H36c4.6,0,8.6-2.3,11.1-5.8c1.1-1.6,1.9-3.5,2.2-5.5c0.1-0.7,0.2-1.4,0.2-2.1v-1V30.5v-3.2v-8.5v-3.2
        C49.4,7.9,43.9,1.5,36.5,0.2" />
  </svg>
  <p id="loadingText">22%</p>
</div>

【讨论】：