我看过很多帖子说 "to add multiple animations, we can add them just by using commas(,)" 但是，就我而言，它没有发生

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

您必须合并变换，否则一组关键帧中的变换集将覆盖另一组关键帧中的变换集。

在您的示例中，可以组合两个变换并在一组关键帧中使用它们：

#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>

对于更复杂的情况，例如不同的时间或不同的缓动函数，必须仔细研究这样的解决方案。

我看过很多帖子说 "to add multiple animations, we can add them just by using commas(,)" 但是，就我而言，它没有发生

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

html

css

svg

frontend

web-deployment