自动多重动画在 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?
这是我在 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 的演示通过多动画位置的正确位置取得了成就。
不太确定你想要什么。只是想猜一下...
.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>
这是我在 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 的演示通过多动画位置的正确位置取得了成就。
不太确定你想要什么。只是想猜一下...
.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>