I have gone through many posts saying "to add multiple animations, we can add them just by using commas(,)" but, in my case, its not happening

Question

#box{
            animation:moving-box 20s linear infinite,  box-rotation 20s linear infinite;
            transform-origin: center;
        }
        @keyframes box-rotation{
            from{
                transform: rotateZ(0deg);
            }
            to{
                transform: rotateZ(360deg);
            }
        }
        @keyframes moving-box {
            0%{
                transform: translateX(-40%);
            }
            50%{
                transform: translateX(40%);
            }
            100%{
                transform: translateX(-40%);
            }
        }

Answer 1

You have to combine the transforms otherwise the transform set in one set of keyframes will overwrite the transforms set in another.

In your example it is possible to combine the two transforms and use them in one set of keyframes:

#box {
  animation: moving-box 20s linear infinite;
  transform-origin: center;
  width: 20vmin;
  height: 10vmin;
  background-color: red;
}

@keyframes moving-box {
  0% {
    transform: rotateZ(0deg) translateX(-40%);
  }
  50% {
    transform: rotateZ(180deg) translateX(40%);
  }
  100% {
    transform: rotateZ(360deg) translateX(-40%);
  }
}

<div id="box"></div>

Such a solution would have to be carefully worked through for a more complex case - for example different timings or different easing functions.