CSS 移动和转换属性在使用关键帧时不起作用

Question

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

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

如何使用 css 属性和关键帧同时对移动和旋转进行动画处理，同时变换原点也随着移动而变化？ 如果可能的话，请有人做任何回复。

Answer 1

见下文。我使用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;
}
}

<div></div>