キーフレームを使用して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>

を使用して所定の位置に終了位置を聞かせて