How to reverse css keyfrmames animation by only using javascript?

Question

document.querySelector(".fall").addEventListener("click", function () {
  document.querySelector(".ball").style.animation = "anim 2s forwards";
});

//my try below
document.querySelector(".up").addEventListener("click", function () {
  document.querySelector(".ball").style.animation = "anim 2s forwards reverse";
});

body{
    display: flex;
    justify-content: center;
}
button{
    margin-top: 150px;
    margin-right: 20px;
    padding: 5px;
}
.box{
    height: 20px;
    width: 100px;
    background-color: royalblue;
    position: absolute;
    top: 100px;
}
.ball{
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 0;
}
@keyframes anim {
    100%{
        top: 80px;
    }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="ball"></div>
    <div class="box"></div>
    <button class="fall">Fall ↓</button>
    <button class="up">Up ↑</button>
    <script src="index.js"></script>
  </body>
</html>

I wnna jump up smoothly this red ball by cliking Up ↑ button after clicking Fall ↓ button. I tride it by setting animation property with extra reverse but it's not working. It's jumping up suddenly. How can i achieve smooth jumping up transition by using only keyframes and javascript.

Do you want it to switch during the animation from falling to ascending? Or is it OK if the animation just "restarts" when clicking on either button? — Rickard Elimää, Oct 09 '22 at 10:31

score 0 · Answer 1 · answered Oct 09 '22 at 10:00

Here is my quick solution.

The animation was removed by setting animation as "" in animationend event listener.

The ball's top position is also set when related event listener is triggered.

const ball = document.querySelector(".ball");
const fallButton = document.querySelector(".fall");
const upButton = document.querySelector(".up");

fallButton.addEventListener("click", function() {
  ball.style.animation = "anim 2s forwards";

  ball.addEventListener("animationend", function() {
    ball.style.top = "80px";
    ball.style.animation = "";
  });
});

upButton.addEventListener("click", function() {
  ball.style.top = 0;
  ball.style.animation = "anim 2s forwards reverse";

  ball.addEventListener("animationend", function() {
    ball.style.top = 0;
    ball.style.animation = "";
  });
});

body {
  display: flex;
  justify-content: center;
}

button {
  margin-top: 150px;
  margin-right: 20px;
  padding: 5px;
}

.box {
  height: 20px;
  width: 100px;
  background-color: royalblue;
  position: absolute;
  top: 100px;
}

.ball {
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 0;
}

@keyframes anim {
  100% {
    top: 80px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="ball"></div>
  <div class="box"></div>
  <button class="fall">Fall ↓</button>
  <button class="up">Up ↑</button>
  <script src="index.js"></script>
</body>

</html>

**ball.style.top = "80px";** it's a very bad idea. Think about there is more than 50+ property in **anim** ,will you write like this then? — Mohiul Islam, Oct 11 '22 at 15:26
You can use CSS variable and change it with JavaScript. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#values_in_javascript — Htet Oo Wai Yan, Oct 11 '22 at 15:52

How to reverse css keyfrmames animation by only using javascript?

1 Answers1