Reset Css Transform Origin After Translation / Rotation

After translating an element in CSS it's transformation origin stays in it's original location. In this particular case I want the transformation origin to stay centered relative t

Solution 1:

Resetting the transform origin, as you say is hard

However, you can keep adding transforms on the right side, with the previous ones unchanged, and you'll get what you want.

(As a side note, in a snippet you don't need the body element in the HTML, and the styles are better placed in the CSS editor.)

.tri-bx {
  animation-name: start;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes start {
  0% {
    transform: rotate( 0deg);
  }
  33% {
    transform: rotate( 315deg);
  }
  66% {
    transform: rotate( 315deg) translate( 0, -5rem) rotate(0deg);
  }
  100% {
    transform: rotate( 315deg) translate( 0, -5rem) rotate( 405deg);
  }
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fdfdfd;
  color: #aaa;
  font-family: Arial, 'sans-serif';
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
}

.tri {
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 1rem solid #555;
  transform: scaleY( 2);
  border-radius: 50%;
}

.status,
.instr {
  position: absolute;
}

.status {
  top: 0;
}

.instr {
  bottom: 0;
}

<divclass="tri-bx"><divclass="tri"></div></div>