rotation - CSS move and translate property not working simultaneously using keyframes -
.animation{ animation: rotate 5s ease-in 0s; } @keyframes rotate{ 0%{transform:rotate(0deg) translate(0px,0px); } 100%{ transform:rotate(2520deg) translate(100px,100px); }
how animate move , rotate simultaneously using css property , keyframes while transform origin changes along movement? if possible please reply.
see below. let end position in place using forwards
div { width: 100px; height: 100px; background: blue; animation: move 3s ease forwards, rotate 3s ease; position: absolute; } @keyframes rotate { { transform: rotate(0deg); } { transform: rotate(2520deg); } } @keyframes move { { top: 0; left: 0; } { top: 100px; left: 100px; } }
<div></div>
Comments
Post a Comment