为什么html不能同时旋转和滑动div？

Question

所以基本上我的 css 文件中有 2 个关键帧，但是当我将它们一起应用到 div 时，它只会旋转而不会滑动。我没有指定任何边距或填充，如果我尝试分别执行它们，它们就可以正常工作。

body {
  background-color: black;
}

.Box {
  width: 10px;
  height: 10px;
  background-color: white;
  animation: slide 10s linear infinite;
  animation: spin 10s linear infinite;
}

@keyframes slide {
  from {
    margin-bottom: 0px;
  }
  to {
    margin-top: 200px;
  }
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

<body>
  <div class="Box"></div>
</body>

Answer 1

你用第二行覆盖了第一个动画。

要应用多个动画，请使用：

animation: spin 10s, slide 10s

为什么html不能同时旋​​转和滑动div？

Why does html not rotate and slide a div simultaneously?

html

css

为什么html不能同时旋转和滑动div？