自动多重动画在 css 中连续从慢速旋转到最快旋转一次调用 on/off 元素的 onclick？

Question

这是我在 this link 上所做的线程的更详细描述。我在 css 上有 3 个动画，我在 fiddle 中制作的是 "animate1 (as a slow rotate), animate2 (as a medium rotate) and animate3 (as a fastest rotate)" 连续自动重复，而不是快速的 onclick 想要运行立即调用在“<h1>”的元素上切换 onClick 的 on/off。到目前为止，我从我的成就中所知道的只是运行他们只通向 animate2。在那之后我不知道如何弄清楚这一切？请任何人帮忙解决这个案子，对不起我的英语不好......

https://jsfiddle.net/bxeg3j2f
Fiddel 的演示通过正确的动画延迟时间安排取得了成就。
https://jsfiddle.net/cwp1hz34/2/
Fiddel 的演示通过多动画位置的正确位置取得了成就。

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>

自动多重动画在 css 中连续从慢速旋转到最快旋转一次调用 on/off 元素的 onclick？

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?

css

animation

css-animations

autorotate