After translating the element into CSS, its origin of the transformation remains in it in its original place. In this particular case, I want the start of the transformation to remain centered on the element during all the transformations. I want the origin to look like this. I know about the transform-origin property, but it seems to me that I need to manually move the beginning with the element every time ... And even if I could do it in JavaScript, it seems very mathematical and not intuitive.
The animation below behaves exactly as intended, with the exception of the last wide rotation. I want the last rotation to rotate around the center of the actual element. Not original location. How to move the beginning of transform 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>
html css rotation css-transforms css-animations
sol acyon
source share