Why does my CSS animation run only once when toggling between classes just differ in animation-direc-CodePudding

I have code as below

<!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>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;
        }
        div.forward {
            animation-name: demo;
            animation-direction: normal;
            animation-duration: 1s;
            animation-fill-mode: forwards;
            animation-timing-function: ease;
        }

        div.backward {
            animation-name: demo;
            animation-direction: reverse;
            animation-duration: 1s;
            animation-fill-mode: forwards;
            animation-timing-function: ease;
        }

        @keyframes demo {
            0% {
                transform: translateX(0);
            } 
            100% {
                transform: translateX(100px);
            }
        }
    </style>
</head>
<body>
    <body>
        <script>
            function t(div) {
                div.classList.remove("backward");
                div.classList.remove("forward");
            }
            function forward(div) {
                div.classList.add("forward");
            }
            function backward(div) {
                div.classList.add("backward");
            }
            var b = true;
            function f() {
                var div = document.getElementsByTagName("div")[0];
                t(div);
                if (b) {
                    forward(div);
                }
                else {
                    backward(div);
                }
                b = !b;
            }
        </script>
        <div onclick="f()"></div>
    </body>
</body>
</html>

with the purpose of running the div element back and forth by changing animation-direction from normal to reverse and vice versa. When I first click the div element the animation runs fine, the seccond and further the animation just immidiately run back and forth without any animations but when I run the code line by line in chrome DevTool

this works as I expected and I don't know why :(

CodePudding user response：

I would recommend you use transform instead of animation. significantly less code and does the same job maybe better.

function t(div) {
  div.classList.remove("backward");
  div.classList.remove("forward");
}

function forward(div) {
  div.classList.add("forward");
}

function backward(div) {
  div.classList.add("backward");
}
var b = true;

function f() {
  var div = document.getElementsByTagName("div")[0];
  t(div);
  if (b) {
    forward(div);
  } else {
    backward(div);
  }
  b = !b;
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
}

div.forward {
 /* animation-name: demo;
  animation-direction: normal;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;*/
  transform:translateX(100px);
  transition:all 1s ease;
  
}

div.backward {
  /* animation-name: demo;
  animation-direction: reverse;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;*/
  transform:translateX(0px);
  transition:all 1s ease;
}

/*@keyframes demo {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}*/

<div onclick="f()"></div>

CodePudding user response：

Check the first answer before this.

We can clean this code even more:

here i am providing the .box with an extra class of .forward. and i am just toggling that with JavaScript.

function f() {
  var box = document.querySelector(".box")
  box.classList.toggle("forward")
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translateX(0px);
  transition: all 1s ease;
}
.box.forward {
  transform: translateX(100px);
  transition: all 1s ease;
}

<div  onclick="f()"></div>