Как плавно увеличить скорость анимации?

Question

[Иван К]

Привет Хабр! Неожиданно столкнулся с проблемой, уже казалось что ничего неизведанного в CSS не осталось, однако...
Есть элемент который крутится по кругу с помощью CSS анимации

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.circle {
        width: 188px;
        height: 188px;
        background: url(../imgs/youtube-circle.svg);
        animation-name: rotation;
        animation-timing-function: linear;
        animation-duration: 20s;
        animation-iteration-count: infinite;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .3s ease;
}

.circle:hover {
    animation-duration: 5s;
}

Необходимо чтобы при наведении скорость увеличивалось, ускоряю уменьшением animation-duration. Но при наведении перед изменением скорости происходит скачок, как будто сбрасывается transform на исходное значение.
Вот как это происходит https://disk.yandex.ru/i/U9SwafVorEFhOw
Возможно ли как то плавно ускорить кручение избежав этого рывка

Comments

[Сергей Сергей]

разбить на кадры с увеличивающимся интервалом изменения угла.

[Иван К]

Сергей Сергей, это как? Вроде как вы предлагаете нечто что выходит юрисдикции CSS анимации

[Сергей Сергей]

Это из юрисдикции математики, гуглить "кусочно-линейная функция", это по-простому.

spoiler

"МАТЕМАТИКА НЕ НУЖНА!!!1111"

[Иван К]

Сергей Сергей, т.е. вы утверждаете что CSS не умеет плавно менять скорость анимации и надо писать костыли на JS со своей математической функцией? Проще тогда отказаться от этой задумки

[Сергей Сергей]

Не надо выдумывать утверждения за других.
https://developer.mozilla.org/en-US/docs/Web/CSS/e... вот функции в css, нужно просто...

spoiler

И сам выдумал.

[Иван К]

Сергей Сергей, так проблема не в easing function а в том что при срабатывании hover анимация сбрасывается на изначальное положение. Т.е. идет rotate 0 - 100% допустим мы навели в момент когда анимация прошла на 60% при наведении он сбросит анимацию на начало и потом ускорит. А мне хочется чтобы она продолжалась с того же места и просто ускорялась.

[RAX7]

Иван К, свойство animation-duration неанимируемое. И да, придется писать костыль на js

[Иван К]

RAX7, Супер, напиши это ответом, а то не могу решением выбрать потому что просто коммент. Благодарность тебе большая!

Answer 1

[RAX7]

Свойство animation-duration неанимируемое. И да, придется писать костыль на js

Comments

[Иван К]

Большое спасибо!

[RAX7]

Иван К, пожалуйста =)