如何旋转图像特定时间然后缓慢停止

Question

我想将图像旋转特定时间（例如2秒）并以特定速度旋转，然后旋转变慢直到停止。 我不是专家，我只知道如何使用css旋转和成像，但没有给定的速度和终点。

Answer 1

尝试一下。使用关键帧是构建动画的好方法。动画将运行2秒钟。缓出属性使动画顺利结束。                 forwards属性可防止图像恢复为原始方向。

<img src="" class="rotation-class" />

.rotation-class {
    width: 200px;
    animation: rotate-animation 2s ease-out forwards;
}
@keyframes rotate-animation {
    from {transform: rotate(0deg);}
    to {transform: rotate(90deg);}
}    

要使动画更快，请缩短动画的长度。您还可以在关键帧动画中使用百分比来进一步自定义动画。

@keyframes rotate-animation {
10% {
    transform: rotate(0deg);
}

20% {
    transform: rotate(90deg);
}
100% {
    transform: rotate(90deg);
}

}