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>