2

i want to "chain" 2 css animations after each other. The first plays on page load and is a css animation that rotates a cube by some degrese. As a second animation i want to rotate that cube even further when the user presses a button (add class to cube onclick).

The Problem is that the cube-div has already a rotate statement from that first animation, so when i add the class (which contains a transform:rotate) it does not animate to that new rotate but skips into the new rotate degree immediatly. Altough i use transition.

I tried to disable the animation with the added class('.rotate-further') so it does not interrupt the second rotation but does not help

div {
  width: 20px;
  height: 20px;
  background: blue;
  animation: rotate 1s forwards;
}

.rotate-further {
  transform: rotate(150deg);
  animation: none;
}

@keyframes rotate {
    0% {
    -webkit-transform:rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(120deg);
    transform:rotate(120deg);
  }
}

My desired result is that the second rotation is animated like normally when you use "transition: all .5s" for example.

window.setTimeout(function() {
  document.querySelector('div').classList.add('rotate-further');
}, 1500)
div {
  width: 20px;
  height: 20px;
  background: blue;
  animation: rotate 1s forwards;
}

.rotate-further {
  transform: rotate(150deg);
  animation: none;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
  }
}
<div></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Julian Orth
  • 320
  • 1
  • 11
  • transform:rotate(x) is reset when you call the class. there no transition either . You can use another animation starting at 120deg till 150deg . animation duration can also be 0s .... – G-Cyrillus May 08 '19 at 19:30

1 Answers1

1

You can edit your code like below:

window.setTimeout(function() {
  document.querySelector('div').classList.add('rotate-further');
}, 1500)
div {
  width: 20px;
  height: 20px;
  background: blue;
  animation: rotate 1s;
  transform: rotate(120deg);
  transition:0.5s all
}

.rotate-further {
  transform: rotate(150deg);
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

}
<div></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415