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

#javascript #css #image #animation #rotation

#javascript #css #изображение #Анимация #вращение

Вопрос:

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

1. Используйте поворот, упрощение перехода на время в css с определенным событием (фокус, наведение, активация …)

2. Спасибо за быстрые ответы 🙂 и спасибо за совет, я обязательно сделаю это

Ответ №1:

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

}