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

Question

[tonnynice]

Есть следующая анимация:
@keyframes wheel {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
div {
animation-name: wheel;
animation-duration: 20s;
animation-iteration-count: infinite;
}
Как при клике на соответсвующие кнопки, плавно ускорять или замедлять анимацию в процессе выполнения?

Answer 1

[Максим Тимофеев]

animation-timing-function

Answer 2

[twobomb]

Вот так, только клацать долго. Нужно сделать чтобы когда держишь мышь уменьшается или увеличивается, отпустил перестает. Ну и шаг настроить нормально.