I have gone through many posts saying "to add multiple animations, we can add them just by usin-CodePudding

#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%);
            }
        }

CodePudding user response：

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.