自动多个动画旋转，从慢速旋转到在css中最快旋转一次调用元素的onclick onclick？

Question

这是我在this link 上所做的主题的更详细描述。我在 css 上制作了 3 个动画，它们是“animate1（作为慢速旋转）、animate2（作为中等旋转）和 animate3（作为最快的旋转）”，它们会自动连续重复，而不是快速地点击它们想要通过在“<h1>”的元素上打开/关闭 onClick 来立即运行。到目前为止，我从我的成就中所知道的只是为了运行它们直到 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>