Помогите настроить траекторию движения элемента в CSS

body {
  background: #111;
}

.block {
  position: relative;
  margin: auto;
  border: 5px solid #ddd;
  width: 30rem;
  height: 30rem;
}

.core {
  width: 3rem;
  height: 3rem;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 1px -2px 146px 50px rgba(255,0,0,0.69);
-webkit-box-shadow: 1px -2px 146px 50px rgba(255,0,0,0.69);
-moz-box-shadow: 1px -2px 146px 50px rgba(255,0,0,0.69);
  transform: translateY(-50%) translateX(-50%);
}

.neutrons__one {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6rem;
  height: 25rem;
  border: 2px solid blue;
  border-radius: 50%;
  transform: translateY(-50%) translateX(-50%) skewY(125deg);
}

.neutrons__one::before {
  content: "";
  position: absolute;
  top: 25%;
  left: 25%;
  width: 5px;
  height: 5px;
  background: #eee;
  box-shadow: 1px -2px 146px 20px rgba(255,255,255,0.69);
-webkit-box-shadow: 1px -2px 146px 20px rgba(255,255,255,0.69);
-moz-box-shadow: 1px -2px 146px 20px rgba(255,255,255,0.69);
  border-radius: 50%;
  animation: ellipse_one 3s linear infinite;
}

.neutrons__two {
    position: absolute;
    top: 60%; 
    right: 60%;
    margin: -10em;
    border: 2px solid blue;
    width: 14rem; 
    height: 14rem;
    border-radius: 50%;
    transform: skewX(55deg);
}

.neutrons__two::before {
  content: "";
  position: absolute;
  top: 7rem;
  left: 7rem;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  box-shadow: 1px -2px 19px 12px rgba(13,6,250,0.69);
-webkit-box-shadow: 1px -2px 19px 12px rgba(13,6,250,0.69);
-moz-box-shadow: 1px -2px 19px 12px rgba(13,6,250,0.69);
  animation: ellipse_two 2s linear infinite;
}

.neutrons__three {
    position: absolute;
    top: 60%; 
    right: 60%;
    margin: -10em;
    border: 2px solid blue;
    width: 13rem; 
    height: 13rem;
    border-radius: 50%;
    transform: skewX(125deg) rotateY(25deg);
}

.neutrons__three::before {
  content: "";
  position: absolute;
  top: 5.9rem;
  left: 5.9rem;
  width: 5px;
  height: 5px;
  box-shadow: 1px -2px 19px 12px rgba(13,6,250,0.69);
-webkit-box-shadow: 1px -2px 19px 12px rgba(13,6,250,0.69);
-moz-box-shadow: 1px -2px 19px 12px rgba(13,6,250,0.69);
  border-radius: 100%;
  transform-origin: 300% 200%;
  animation: ellipse_three 1s linear infinite;
}



@keyframes ellipse_one {
  from {
    transform: skewX(50deg) rotate(0deg) translateY(5em);
  }
  to {
    transform: skewX(50deg) rotate(360deg) translateY(5em);
  }
}

@keyframes ellipse_two {
  from {
    transform: skewX(180deg) rotate(0deg) translateY(7em) 
               rotate(0deg) skewX(-180deg) rotate(0deg);
  }
  to {
    transform: skewX(180deg) rotate(360deg) translateY(7em) 
               rotate(-360deg) skewX(-180deg) rotate(360deg);
  }
}


@keyframes ellipse_three {
  from {
    transform: skewX(180deg) rotate(0deg) translateY(6.9em) 
               rotate(0deg) skewX(-180deg) rotate(0deg);
  }
  to {
    transform: skewX(180deg) rotate(360deg) translateY(6.9em) 
               rotate(-360deg) skewX(-180deg) rotate(360deg);
  }
}

<div class="block">
  <div class="core"></div>
  <div class="neutrons__one"></div>
  <div class="neutrons__two"></div>
  <div class="neutrons__three"></div>
</div>