CSS move and translate property not working simultaneously using keyframes

Home / Uncategorized / CSS move and translate property not working simultaneously using keyframes

Question:
.animation{
animation: rotate 5s ease-in 0s;
}
@keyframes rotate{
0%{transform:rotate(0deg) translate(0px,0px);
}

100%{
transform:rotate(2520deg) translate(100px,100px);
}

How to animate move and rotate simultaneously using css property and keyframes while the transform origin also changes along with movement? If it is possible please someone do any reply.


Answer:
See below. I let the 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 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(2520deg);
}
}

@keyframes move {
from {
top: 0;
left: 0;
}
to {
top: 100px;
left: 100px;
}
}

Read more

Leave a Reply

Your email address will not be published. Required fields are marked *