CSS中给div同时应用旋转和滑动动画为何仅旋转生效？

• CSS同选择器下重复声明的同名属性会被后写的内容完全覆盖，你给.Box先后写了两行animation属性，前面声明的slide动画直接被后面的spin覆盖，浏览器最终只会执行最后声明的旋转动画。
• 你写的slide关键帧本身存在逻辑问题：从margin-bottom: 0过渡到margin-top: 200px是在两个不同CSS属性间切换，没有连续的中间过渡值，就算动画加载成功也会出现状态跳变，不会产生平滑滑动效果。

1. 多个动画需要同时生效时，要把所有动画名写在同一个animation属性中，用逗号分隔，不要分多行写同名属性。
2. 修正slide关键帧的属性，统一使用margin-top做过渡，保证滑动效果平滑。

修复后的完整代码：

body {
  background-color: black;
}

.Box {
  width: 10px;
  height: 10px;
  background-color: white;
  /* 多动画逗号分隔，写在同一条声明里 */
  animation: slide 10s linear infinite, spin 10s linear infinite;
}

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

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

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

如果需要更流畅的动画表现，建议把滑动效果也改用transform属性实现（修改transform不会触发页面重排，性能远高于修改margin类属性）。由于旋转和滑动都属于transform下的变换，直接把两个效果合并到同一个关键帧里即可，代码更简洁：

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

@keyframes slideAndSpin {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(200px) rotate(360deg);
  }
}

内容的提问来源于stack exchange，提问作者Mattka