javascript / css animations

Question

I have a div section that I want to when I clicked the button it comes down then rotates so it comes bottom but it doesnt rotate after transfering to bottom. It just comeback to first position in Y axis. how can i solve this issue

let slider = document.getElementsByClassName('slideshow')[0];

function movingfunc() {
  slider.classList.add('movement')
  setTimeout(nextFunc, 5000)
}

function nextFunc() {
  slider.removeAttribute('class', 'movement');
  slider.classList.add('movementAfter');
}

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.movement {
  transform: translateY(500px);
  transition: 4s;
}

.movementAfter {
  transform: rotate(360deg);
  background-color: red;
  transition: 2s;
  margin: 0 auto;
  height: 100px;
  width: 200px;
}

<div class="slideshow" class="movement"></div>
<button id="chos" onclick="movingfunc()">click to move</button>

Answer 1

You can do like in below snippet and changes the animation at various percent it is complete .

If you want to trigger same anime than use setTimeout to remove the class and add on click of button .

With animation gives you extra functionality and more properties to work as expected

let slider = document.getElementsByClassName('slideshow')[0];
let btn = document.getElementById('chos');

btn.addEventListener('click', function() {
  slider.classList.add('animate')
  setTimeout(() => {
    slider.classList.remove('animate')
  }, 5000)
})

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.slideshow.animate {
  animation: spinTrans 5s;
}

@keyframes spinTrans {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(500px) rotate(360deg)
  }
  100% {
    transform: rotate(0deg) translateY(0px);
    background-color: red;
  }
}

<div class="slideshow"></div>
<button id="chos">click to move</button>

================================================================

Update : As you need a change in same code :

You must remove the second function so that box stay at bottom . Now you can add any degree of rotation to it .

This was for previous edit : Your code is rotating the slideshow by 360deg but as it will be repositioned to same state so you are not seeing any changes .
If you change your angle to 90deg 180deg 270deg 450deg```` ..... you will see a rotation but you can't see rotation in 0deg 360deg 720deg``` .

Here is a working snippet with 180deg rotation you can apply any of the above mentioned and see changes

let slider = document.getElementsByClassName('slideshow')[0];

function movingfunc() {
  slider.classList.add('movement')
}

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.movement {
  transform: translateY(500px) rotate(360deg);
  transition: 4s;
  background-color: red;
}

<div class="slideshow" class="movement"></div>
<button id="chos" onclick="movingfunc()">click to move</button>