Как я могу повернуть изображение в течение определенного времени, а затем остановить его медленно

Question

Я хочу вращать изображение в течение определенного времени (например, 2 секунды) и с определенной скоростью, а затем вращение замедляется, пока не остановится. Я не эксперт, я просто знаю, как вращать и изображать с помощью CSS, но не с заданной скоростью и окончанием.

Answer 1

Дайте это попробовать.Использование ключевых кадров - это хороший способ создания анимации.Анимация будет работать в течение 2 секунд.Свойство easy out обеспечивает плавное завершение анимации.Свойство 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);
}

}