Center Position a CSS-Animation Playing With rotate(45deg)

I have the following code:

#containerScroll {
  height: 5em;
}

scroll {
  transform: translateY(0%) rotate(45deg);
  opacity: 0;
}

.first-scroll {
  left: calc(52.3% - 1em) !important;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 25px;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  position: absolute;
  animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}

.second-scroll {
  left: calc(52.3% - 1em) !important;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 40px;
  position: absolute;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  animation: scrolldown1 1.2s ease-in-out infinite;
}

@keyframes scrolldown1 {
  0% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(0%) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
}

<div id="containerScroll">
  <scroll class="first-scroll"></scroll>
  <scroll class="second-scroll"></scroll>
</div>

On my end, the output is looking like this:

This is exactly what I want since the scroll down button is aligned right on top of the text and I achieved this by setting left: calc(52.3% - 1em) !important;. On my end, this property is whats making it align perfectly on top of the text.

The problem is that when I zoom out, I’m getting this output:

As you can see, the scroll button alignment changes and its moved towards the right, and it is because of the left: calc(52.3% - 1em) !important; property I’m pretty sure. But I do not want to change or remove this property since this is whats making it align perfectly on 100% zoom. Is there a way to make this fixed? For example, when I zoom out on the website, the scroll button alignment does not change and remains constant? Any suggestions?

Answer

That’s a really cool animation!

To perfectly center it, I made the following changes:

• This was being used to center the div, left: calc(52.3% - 1em) !important;; I have removed this completely and have used a simple <center> tag to center it.
• The animation code itself then runs directly right of center (which is off-center). You can fix this by moving an element to the left of itself by 50% of its own width with translateX(-50%).
• Of course, you can’t actually use 50%, because a square box, rotated on its side, increases its width by a factor of about 45%, which means we need to translateY not by 50%, but by 66%.

#containerScroll {
  height: 5em;
}

scroll {
  transform: translateY(0%) rotate(45deg);
  opacity: 0;
}

.first-scroll {
  margin: auto;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 25px;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  position: absolute;
  animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}

.second-scroll {
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 40px;
  position: absolute;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  animation: scrolldown1 1.2s ease-in-out infinite;
}

@keyframes scrolldown1 {
  0% {
    transform: translateY(20%) rotate(45deg) translateX(-66%);
    opacity: 0.7;
  }
  50% {
    transform: translateY(0%) rotate(45deg) translateX(-66%);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg) translateX(-66%);
    opacity: 0.7;
  }
}

<div id="containerScroll">
<center>
  <scroll class="first-scroll"></scroll>
  <scroll class="second-scroll"></scroll>
</center>
</div>

<div style="border:1px solid black;">
<center>&bull;<br>
This dot is perfectly centered.
</center>
</div>