多个动画同时在CSS中旋转一次调用一个元素的切换onclick(缓慢旋转，中等旋转，快速旋转)? [英] Multiple animation rotate in css at once call in toggle onclick of one element (slow rotate, medium rotate, fast rotate)?

问题描述

我在css上制作了3种在小提琴中制作的动画，分别是"animate1(作为慢速旋转)，animate2(作为中等旋转)和animate3(作为最快旋转)"，这些动画要通过切换onClick来运行在< h1>" 的元素上，直到现在我的成就直到直到运行animate2后才知道，我不知道如何?请任何人解决这种情况，对不起我的英语不好...

小提琴上的演示

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>

推荐答案

仅使用一种动画，只需增加/减少持续时间即可控制速度:

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>

这篇关于多个动画同时在CSS中旋转一次调用一个元素的切换onclick(缓慢旋转，中等旋转，快速旋转)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！