2

I want to create an animation showing a few circles moving one after another in orbit. Currently, I created three circles but they appear on separate lines and thus move in a circular movement, but as a line. How can I change the code to achieve the movement that I want? Here's a codepen with the current status.

Here's the code that I use:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
}

.loader {
  height: 50px;
  animation: rotate 6s linear infinite;
}

.circle {
  display: inline-block;
  background-color: purple;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transform: scale(0);
  animation: grow 1.5s linear infinite;
  margin: -20p;
}

.circle:nth-child(2) {
  background-color: palevioletred;
  transform: scale(0);
  animation-delay: 0.20s;
}

@keyframes rotate {
  to {
    transform: rotate(360deg)
  }
}

@keyframes grow {
  50% {
    transform: scale(1);
  }
}
<div class="loader">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Keselme
  • 3,779
  • 7
  • 36
  • 68
  • It's a bit unclear how you want your circles to move. Do you have an animation somewhere you can point us to that is what you want? Or can you describe your desired outcome a bit more clearly? – TylerH May 31 '19 at 16:08
  • I interpret it to mean that all circles should follow a circumferential path, in sequence. – isherwood May 31 '19 at 16:12
  • So actually like a solar system? Or this - https://stackoverflow.com/questions/39020670/rotate-objects-around-circle-using-css – Paulie_D May 31 '19 at 16:14
  • @Paulie_D yes this is what I want to achieve, but I want all the circles to be on the same orbit and not one under another. – Keselme May 31 '19 at 16:20
  • *"I want all the circles to be on the same orbit and not one under another."* - Not sure what this means – Paulie_D May 31 '19 at 16:21

2 Answers2

1

I'm creating full-size "plates" which I can set to an initial rotation point. The circles end up as pseudo-elements on the plates (to avoid extra markup). Modify the initial rotation values to bring the circles closer together.

.loader {
  width: 100px;
  height: 100px;
  animation: rotate 6s linear infinite;
  position: relative;
}

.plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.plate:nth-child(2) {
  transform: rotate(120deg);
}

.plate:nth-child(3) {
  transform: rotate(240deg);
}

.plate:before {
  content: '';
  position: absolute;
  background-color: red;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transform: scale(0);
  animation: grow 1.5s linear infinite;
}

.plate:nth-child(2):before {
  background: green;
}

.plate:nth-child(3):before {
  background: blue;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes grow {
  50% {
    transform: scale(1);
  }
}

* {
  box-sizing: bordr-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Lato", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
}
<body>
  <div class="loader">
    <div class="plate"></div>
    <div class="plate"></div>
    <div class="plate"></div>
  </div>
</body>
isherwood
  • 58,414
  • 16
  • 114
  • 157
0

@isherwood provided a great solution that's easily workable in most modern browsers. But let's say you want more complex motion, like an elliptical orbit.

SVG Animation

You could build the whole thing into an SVG since that supports lots of cool animation while being quite performant. But building SVGs and animating them from scratch is kinda complicated. Luckily, there are tools to help. Here's a few examples: Snapsvg (code library), SVGGator (Web-based animation tool) or Bodymovin (After Effects workflow).

But let's say you want to stick with what can be done in HTML/CSS.

CSS Motion Path

Sadly support is, not great as of Summer 2019 but it will likely be improving. If your audience is using the right browsers (Chrome, Opera, Edge or Chromium based mobile browsers). It's actually pretty easy to use but there are some gotchas. For example, it appears that only the path() property works right now. So you can't use shape keywords like circle() or ellipse() though they're in the spec.

main {
    position: relative;
    margin: 20px;
}
main,svg {
 width: 100px;
 height: 100px;
}

path {
    stroke-width: 1px;
}
svg {
    position:absolute;
    opacity: 0.5;
}
#c1 {
    stroke: red;
}
#c2 {
    stroke: blue;
}
#c3 {
    stroke: green;
}

div[class*="c"] {
 width: 15px;
 height: 15px;
 border-radius: 50%;
 position: absolute;
 box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);
}

.c1 {
 background-color: red;
 offset-path: path('M50,2 C78.2166667,2 98,22.2364005 98,50.5 C98,78.7635995 75.5694444,99 50,99 C24.4305556,99 2,76.5476997 2,50.5 C2,24.4523003 21.7833333,2 50,2 Z');
 animation: moveme 5s ease-in-out infinite;
}

.c2 {
 background-color: blue;
 offset-path: path('M55,13 C80.2774306,13 98,30.9415509 98,56 C98,81.0584491 77.9059606,99 55,99 C32.0940394,99 12,79.0938368 12,56 C12,32.9061632 29.7225694,13 55,13 Z');
 animation: moveme 5.25s linear infinite;
}
.c3{
 background-color: green;
 offset-path: path('M36.0041619,30.5873511 C61.3414991,12.7718541 90.4202796,4.99194919 98.2799065,16.2635432 C106.139533,27.5351371 85.805943,52.9370587 62.845696,69.0811471 C39.885449,85.2252355 7.31148243,93.0730731 1.30061213,84.4528052 C-4.71025818,75.8325372 10.6668246,48.4028481 36.0041619,30.5873511 Z');
 animation: moveme 5.5s linear infinite;
}

@keyframes moveme {
  100% { 
    motion-offset: 100%;
    offset-distance: 100%;
  }
}
<main>
    <!-- paths for example -->
    <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="orbit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M50,2 C78.2166667,2 98,22.2364005 98,50.5 C98,78.7635995 75.5694444,99 50,99 C24.4305556,99 2,76.5476997 2,50.5 C2,24.4523003 21.7833333,2 50,2 Z" id="c1"></path>
    <path d="M55,13 C80.2774306,13 98,30.9415509 98,56 C98,81.0584491 77.9059606,99 55,99 C32.0940394,99 12,79.0938368 12,56 C12,32.9061632 29.7225694,13 55,13 Z" id="c2"></path>
    <path d="M36.0041619,30.5873511 C61.3414991,12.7718541 90.4202796,4.99194919 98.2799065,16.2635432 C106.139533,27.5351371 85.805943,52.9370587 62.845696,69.0811471 C39.885449,85.2252355 7.31148243,93.0730731 1.30061213,84.4528052 C-4.71025818,75.8325372 10.6668246,48.4028481 36.0041619,30.5873511 Z" id="c3"></path>
</g>
</svg>

 <div class="c1"></div>
 <div class="c2"></div>
 <div class="c3"></div>
</main>
Bryce Howitson
  • 7,339
  • 18
  • 40