仅用于翻译属性的过渡

Question

我有两个变换操作（旋转和平移），我只想对平移进行过渡（旋转必须是即时的）。

有些建议？我更喜欢纯CSS。

Answer 1

除了animation-fill-mode用于在动画完成时保留计算样式之外，还可以使用关键帧达到所需的效果。

.object { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #F00; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.object:hover { 
 
    animation: move 1s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 

 
@keyframes move { 
 
    0% { 
 
     transform: translateY(0px) rotate(0deg); 
 
    } 
 
    1% { 
 
     transform: rotate(45deg);  
 
    } 
 
    100% { 
 
     transform: translateY(25px) rotate(45deg); 
 
    } 
 
}

<div class="object"></div>