Multiple animation rotate in css at once call in toggle onclick of one element (slow rotate, medium rotate, fast rotate)?

问题

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) which is want to running by toggle onClick on an Element of "<h1>". untiil now of my achievements is just only till running to animate2 only after that I don't know how ? Please to anyone for solve this case and sorry for my bad english ...

demo on fiddle

function Animation() {
var anim = document.getElementsByTagName("h1")[0];
  anim.innerText = "|"; anim.className = "animate1";
  anim.addEventListener("webkitAnimationEnd", function() {anim.className = 'animate2'});
  anim.addEventListener("animationend",  function() {anim.className = 'animate2'});
}

@keyframes twister1 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes twister2 {
  0% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(360deg);
  }
  20% {
    transform: rotateZ(720deg);
  }
  30% {
    transform: rotateZ(1080deg);
  }
  40% {
    transform: rotateZ(1440deg);
  }
  50% {
    transform: rotateZ(1800deg);
  }
  60% {
    transform: rotateZ(2160deg);
  }
  70% {
    transform: rotateZ(2520deg);
  }
  80% {
  }
  90% {
  }
  100% {
  }
}

@keyframes twister3 {
  from {
    transform-origin: center;
    transform: rotate(-20000deg);
    opacity: 1;
  }
  to {
    transform-origin: center;
    transform: none;
    opacity: 1;
  }
}

.animate1 {
    -webkit-animation: twister1;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.animate2 {
    -webkit-animation: twister2;
    animation-duration: 6s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.animate3 {
    -webkit-animation: twister3;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.center {
  font-family: 'Montserrat', sans-serif;
  transform: translateY(-50%);
  text-align: center;
  position: fixed;
  margin: 0px;
  width: 100%;
  color: #222;
  z-index: 1;
  top: 50%;
}

<div class="center">
<h1 onclick="Animation()">|</h1>
</div>

回答1:

Use only one animation and simply increase/decrease the duration to control the speed:

var i = 7;
var anim = document.getElementsByTagName("h1")[0];

function Animation() {
  anim.className = "animate";
  anim.style.animationDuration = (i-=2) + 's';
  if(i<=0) {
    i=7;
  }
}

@keyframes twister {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate {
  animation: twister 5s infinite linear;
}

.center {
  font-family: 'Montserrat', sans-serif;
  transform: translateY(-50%);
  text-align: center;
  position: fixed;
  margin: 0px;
  width: 100%;
  color: #222;
  z-index: 1;
  top: 50%;
}

<div class="center">
  <h1 onclick="Animation()">|</h1>
</div>

来源：https://stackoverflow.com/questions/61220874/multiple-animation-rotate-in-css-at-once-call-in-toggle-onclick-of-one-element

标签

javascript

html

css

animation

animate.css