Auto multiple animation rotate with continuously from slow rotate till to fastest rotate in the css at once call on/off onclick of an element?

Question

This is more detailed description from the thread of what I've made on this link. I have 3 animations on css what I've made in fiddle that are "animate1 (as a slow rotate), animate2 (as a medium rotate) and animate3 (as a fastest rotate)" with continuously repeated automatically not with rapided them onclick which is want to running at once call by toggle on/off of an onClick on an Element of "<h1>". During till now what I'd know from what my achievements has reached is just only for running them leading till to animate2 only. After that I don't know how to figured out an of this all ? Please anyone to take and help for solve this case and sorry about my worse english ...

https://jsfiddle.net/bxeg3j2f
Fiddel's demo greates an achievements with the correct schedule of animations times of delay.
https://jsfiddle.net/cwp1hz34/2/
Fiddel's demo greates an achievements with the correct position of multi-animations places supposed be.

Answer 1

Not really sure about what you want. Just trying to guess it...

.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>