css - 两个CSS动画互相干扰

Question

我创建了这个 snippet on Codepen :地球自转，汽车行驶。但是，当汽车移动时，地球也会旋转。我希望所有元素都走自己的路。

为什么汽车会影响地球，如何避免？

body {
  background: url(https://news.vanderbilt.edu/files/NASA_SMBH1.jpg);
  background-size: 1000px;
}

#firstimg {
  background-image: url(http://www.21tech.ir/dfxhfgh.gif);
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100px;
  animation: anim1 14s infinite linear;
  margin: 40px;
}

#earth {
  margin-left: 100px;
  width: 500px;
  height: 500px;
  background: url(http://www.drodd.com/images14/map-of-earth1.jpg);
  border-radius: 50%;
  background-size: 1000px;
  box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
  animation-name: rotate;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  filter: brightness(50%);
}

@keyframes rotate {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: 1000px;
  }
}

@keyframes anim1 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg)
  }
  50% {
    transform: translate(20px, 20px) rotate(10deg)
  }
}

<div id="firstimg">
  <div>
    <div id="earth"></div>

Answer 1

你还没有关闭你的firstimg div标签，因此它在一个div下运行

<div id="firstimg"></div>
<div id="earth"></div>

关注Codepen