Движение по кругу (CSS3)

469
20 января 2017, 08:26

У меня вопрос по поводу того как синхронизировать анимации @keyframes. Есть планета, которая вращается по кругу. Мне хочется добавить ещё одну, но с другой точкой старта. Однако, получается, что анимации выполняются последовательно и одна планета накладывается на другую, а точка старта меняется скачкообразно. Как это можно исправить? И ещё подскажите, как сделать чтобы вращающаяся планета была привязана к центральной не вылетала с орбиты при изменении размера окна.

html { 
  height:100%; 
} 
body { 
  background-position: center center; 
  background-attachment: fixed; 
  background-size: cover; 
  background-color: #464646; 
   
  /*контент в центр страницы*/ 
  margin: 0; 
  height: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
.circle { 
  margin: 33% 33% 33% 33%; 
  background: radial-gradient(#60AAFE, #0455F1, #D86AF7); 
  border-radius: 50%; 
  height: 100px; 
  width: 100px; 
  transition: all 0.6s ease; 
} 
 
.circle1, 
.circle2 { 
  background: radial-gradient(#60AAFE, #0455F1, #D86AF7); 
  border-radius: 50%; 
  height: 70px; 
  width: 70px; 
  transition: all 0.6s ease; 
  position: absolute; 
  margin: 8%; 
  transform:rotateX(-90deg) translateZ(100px) rotate(180deg); 
} 
 
/*при наведении на фигуру*/ 
.circle:hover, 
.circle1:hover, 
.circle2:hover { 
  box-shadow: inset #57A8FA 0 0 40px 10px, 
              #57A8FA 0 0 24px 12px; 
} 
 
.donut { 
  border: 1px solid  #F0FFFF; 
  border-radius: 150px; 
  height:300px; 
  width:300px; 
  box-shadow: inset #57A8FA 0 0 20px 5px, 
              #57A8FA 0 0 22px 7px; 
} 
 
.orbit1 { 
  position: absolute; 
  right: 33%; 
   
  animation: Orbita 15s linear infinite; 
} 
 
@keyframes Orbita { 
  from { 
    -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); 
  } 
  to { 
    -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); 
  } 
  } 
} 
 
.orbit2 { 
  position: absolute; 
  right: 33%; 
  left: 39%; 
  top: 29%; 
  bottom: 33%; 
 
  animation: Orbita 15s linear infinite;  
} 
 
@-webkit-keyframes Orbita { 
  from {  
    -webkit-transform: rotate(180deg) translateX(150px) rotate(0deg); 
  } 
  to   {  
    -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); 
  } 
  } 
}
<div class="donut"> 
  <figure class="circle1 circle1-pos orbit1"></figure> 
  <figure class="circle2 circle2-pos orbit2"></figure> 
  <figure class="circle"></figure> 
</div>

Answer 1

Попробуйте

@keyframes Orbita2 {
    from { transform: rotate(180deg) translateX(150px) rotate(180deg); }
    to   { transform: rotate(540deg) translateX(150px) rotate(540deg); }
}
.orbit2 {
    animation: Orbita2 15s linear infinite;
}

Итого:

html { 
  height:100%; 
} 
body { 
  background-position: center center; 
  background-attachment: fixed; 
  background-size: cover; 
  background-color: #464646; 
   
  /*контент в центр страницы*/ 
  margin: 0; 
  height: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
.circle { 
  margin: 33% 33% 33% 33%; 
  background: radial-gradient(#60AAFE, #0455F1, #D86AF7); 
  border-radius: 50%; 
  height: 100px; 
  width: 100px; 
  transition: all 0.6s ease; 
} 
 
.circle1, 
.circle2 { 
  background: radial-gradient(#60AAFE, #0455F1, #D86AF7); 
  border-radius: 50%; 
  height: 70px; 
  width: 70px; 
  transition: all 0.6s ease; 
  position: absolute; 
  margin: 8%; 
  transform:rotateX(-90deg) translateZ(100px) rotate(180deg); 
} 
 
/*при наведении на фигуру*/ 
.circle:hover, 
.circle1:hover, 
.circle2:hover { 
  box-shadow: inset #57A8FA 0 0 40px 10px, 
              #57A8FA 0 0 24px 12px; 
} 
 
.donut { 
  border: 1px solid  #F0FFFF; 
  border-radius: 150px; 
  height:300px; 
  width:300px; 
  box-shadow: inset #57A8FA 0 0 20px 5px, 
              #57A8FA 0 0 22px 7px; 
} 
 
.orbit1 { 
  position: absolute; 
  right: 33%; 
   
  animation: Orbita 15s linear infinite; 
} 
 
@keyframes Orbita { 
  from { 
    transform: rotate(0deg) translateX(150px) rotate(0deg); 
  } 
  to { 
    transform: rotate(360deg) translateX(150px) rotate(-360deg); 
  } 
} 
@keyframes Orbita2 { 
    from { transform: rotate(180deg) translateX(150px) rotate(180deg); } 
    to   { transform: rotate(540deg) translateX(150px) rotate(540deg); } 
} 
 
.orbit2 { 
  position: absolute; 
  right: 33%; 
  left: 39%; 
  top: 29%; 
  bottom: 33%; 
  animation: Orbita2 15s linear infinite;  
}
<div class="donut"> 
  <figure class="circle1 circle1-pos orbit1"></figure> 
  <figure class="circle2 circle2-pos orbit2"></figure> 
  <figure class="circle"></figure> 
</div>

READ ALSO
Реализация верхнего меню
CSS

Реализация верхнего меню

На днях набросал код верхнего меню без использования скриптовВсё работает на ура, но правильно ли это? Дело в том, что я использовал для стилизации...

 357
content не работает в less
CSS

content не работает в less

Есть такой код:

 284
Как работает alignas()?
c++

Как работает alignas()?

Никак не могу понять как работает alignas()Почему расстояние равно 2016, а без него 24?

 316
Вылетает QWebEngineView
c++

Вылетает QWebEngineView

ЗдравствуйтеПишу небольшой клиент вк и мне надо для авторизации открыть сайт для подтверждения

 402