CODEWITHSUNDEEP
htmlcssanimationsvg
twan
twan

Reputation: 2659

CSS Animated element is shaking (not intended)

I am trying to create a preloader but for some reason the element is shaking a little.

Codepen link: https://codepen.io/twan2020/pen/PobYyVm

I've tried changing the transform percentages but can't get it right.

If I change:

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

To :

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

The shaking disappears but I need that part for the animation. How can I get rid of the shaking and why does it shake?

Upvotes: 1

Views: 490

Answers (1)

doğukan
doğukan

Reputation: 27391

Use box-shadow instead. Changing the border width in an animation can cause shaking problems. Because border takes up space in the page but box-shadow is not. box-shadow is always better suited than border for animations.

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>

Upvotes: 1

Related Questions