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

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);
}

}