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>

到位的結束位置