如何使这个简单的CSS动画工作？ （轨道圆圈）

Question

我正在尝试学习如何在中心创建多个圆圈的CSS动画或者围绕另一个圆圈（我只需要它在Chrome中工作）

Codepen： https://codepen.io/anon/pen/ZxvBve?editors=1100

我遇到了麻烦，使它们在不同的平面上以及相对于观察者的不同角度进行轨道运动。我不确定什么是最简单，更优化的方法。我应该使用rotate()还是别的什么？

Answer 1

我修改了你的样本，如下所示。它允许电子的交叉运动。我想如果你以其他方式调整movingLeft和movementRight中的left，right和top值，你可以根据需要实现其他角度：

CSS：

html, body {
  height: 100%;
  background: #222;
}

#atom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.3);
}

#nucleus {
    height: 10px;
    width: 10px;
  position: absolute;
    background: #999;
    border-radius: 100%;
}


.electron1 {
  width: 20px;
  height: 20px;
  position: absolute;
  background: #fff;
  border-radius: 100%;
  -webkit-animation: movementLeft 2s ease-in-out infinite, size 2s linear infinite;
}

.electron2 {
  width: 20px;
  height: 20px;
  position: absolute;
  background: #fff;
  border-radius: 100%;
  -webkit-animation: movementRight 2s ease-in-out infinite, size 2s linear infinite;
}

@-webkit-keyframes movementLeft {
  0% { left: -150px; top: -150px }
  50% { left: 150px; top: 150px}
  100% { left: -150px; top:-150px }
}

@-webkit-keyframes movementRight {
  0% { right: -150px; top: -150px }
  50% { right: 150px; top: 150px}
  100% { right: -150px; top:-150px }
}

@-webkit-keyframes size {
  0% { transform: scale(1) }
  25% { transform: scale(2) }
  75% { transform: scale(1) }
}

HTML：

<div id="atom">
  <div id="nucleus"></div>
  <div class="electron1"></div>
  <div class="electron2"></div>
</div>

    html, body {
      height: 100%;
      background: #222;
    }
    
    #atom {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.3);
    }
    
    #nucleus {
    	height: 10px;
    	width: 10px;
      position: absolute;
    	background: #999;
    	border-radius: 100%;
    }
    
    
    .electron1 {
      width: 20px;
      height: 20px;
      position: absolute;
      background: #fff;
      border-radius: 100%;
      -webkit-animation: movementLeft 2s ease-in-out infinite, size 2s linear infinite;
    }
    
    .electron2 {
      width: 20px;
      height: 20px;
      position: absolute;
      background: #fff;
      border-radius: 100%;
      -webkit-animation: movementRight 2s ease-in-out infinite, size 2s linear infinite;
    }
    
    @-webkit-keyframes movementLeft {
      0% { left: -150px; top: -150px }
      50% { left: 150px; top: 150px}
      100% { left: -150px; top:-150px }
    }
    
    @-webkit-keyframes movementRight {
      0% { right: -150px; top: -150px }
      50% { right: 150px; top: 150px}
      100% { right: -150px; top:-150px }
    }
    
    @-webkit-keyframes size {
      0% { transform: scale(1) }
      25% { transform: scale(2) }
      75% { transform: scale(1) }
    }

    


    <div id="atom">
      <div id="nucleus"></div>
      <div class="electron1"></div>
      <div class="electron2"></div>
    </div>