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 to the element during all transforms. I want the origin to sort of follow the element being transformed. I know about the transform-origin property but that seems to require me to manually move the origin with the element each time...And even if I could do that in JavaScript, it seems very math heavy and not intuitive.
The animation below behaves exactly as intended except for the last wide rotation. I want that last rotation to revolve around the center of the actual element. Not it's original location. How can I move the transform origin back to the center of this element. Ideas?
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;
}<head>
<style>
.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 );
}
100% {
transform: rotate( 720deg ) translate( 0, -5rem );
}
}
</style>
</head>
<body>
<div class="tri-bx">
<div class="tri"></div>
</div>
</body>
