如何使此简单的CSS动画起作用?(绕圈)

Question

我正在尝试学习如何创建多个圆圈的CSS动画，从而绕着中心的另一个圆圈(我只需要在Chrome中工作(

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

我遇到了麻烦，使它们在不同的平面和与观众的角度不同。我不确定最简单，最佳的方法是什么。我应该使用 rotate()还是其他？

Answer 1

我如下所述修改了您的样本。它允许电子的纵横运动。我认为，如果您以其他方式调整Movemtleft的左，右和最高值，则可以根据需要实现其他角度：

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>