Автоматическое многократное вращение анимации с непрерывным от медленного вращения до самого быстрого поворота в css за один раз при вызове включения / выключения щелчка элемента?

Question

Это более подробное описание из ветки того, что я сделал на этой ссылке . У меня есть 3 анимации на css, которые я сделал в скрипке: «animate1 (как медленное вращение), animate2 (как среднее вращение) и animate3 (как быстрое вращение)» с непрерывным повторением автоматически, а не с их повторением onclick, который хочет выполнить вызов сразу, путем включения / выключения onClick для элемента «<h1>». До сих пор, что я знаю из того, чего достигли мои достижения, так это только для того, чтобы запустить их и привести только к animate2. После этого я не знаю, как все это выяснить? Прошу кого-нибудь взять и помочь решить это дело, и извините за мой худший engli sh ...

https://jsfiddle.net/bxeg3j2f
Демо Фидделя демонстрирует достижения с правильным графиком анимаций, время задержка.
https://jsfiddle.net/cwp1hz34/2/
Демонстрация Фидделя отображает достижения с правильной позицией мест мультипликации, которые должны быть.

Answer 1

Не совсем уверен, что вы хотите. Просто пытаюсь угадать ...

.test {
    font-size: 50px;
    background-color: lightblue;
    animation: rotate linear 6s infinite;
    display: block;
    width: 50px;
}

@keyframes rotate {
  0% {transform: rotate(0deg)}
  33% {transform: rotate(360deg)}
  66% {transform: rotate(1080deg)}
  100% {transform: rotate(7200deg)}

}


Another possible approach, making the speed increase smoother:

<div class="test">A</div>

.test {
    font-size: 50px;
    background-color: lightblue;
    display: block;
    width: 35px;
    padding: 0px 14px;
    animation: rotate 6s infinite;
    animation-timing-function: cubic-bezier(.59,.07,.88,.64);
}

@keyframes rotate {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(1800deg)}
}

<div class="test">A</div>