Многократное вращение анимации в css за один раз вызывает переключение одного элемента (медленное вращение, среднее вращение, быстрое вращение)? - PullRequest
Новая
       55

Многократное вращение анимации в css за один раз вызывает переключение одного элемента (медленное вращение, среднее вращение, быстрое вращение)?

1 голос
/ 15 апреля 2020

У меня есть 3 анимации на css, которые я сделал в скрипке, это "animate1 (как медленное вращение), animate2 (как среднее вращение) и animate3 (как быстрое вращение), которое нужно запустить Нажмите на элемент "<h1>". пока мои достижения не будут выполнены, пока я не знаю, как это сделать, только до запуска animate2, пожалуйста, кому-нибудь разрешите этот случай и извините за мой плохой английский sh .. .

демо на скрипке 

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 Ответ

1 голос
/ 15 апреля 2020

Используйте только одну анимацию и просто увеличивайте / уменьшайте продолжительность для управления скоростью: 

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>
...