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>

到位的结束位置