Движение элемента по кругу

Question

Как выполнить бесконечное движение шарика по кругу?

* {
  box-sizing: border-box;
}

.wrp {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  position: relative;
  margin-top: 20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: antiquewhite;
  border: 1px solid burlywood;
}

.ball {
  position: absolute;
  top: 0%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: chocolate;
}

<div class="wrp">
  <div class="circle">
    <div class="ball"></div>
  </div>
</div>

Answer 1

* {
  box-sizing: border-box;
}

.wrp {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  position: relative;
  margin-top: 20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: antiquewhite;
  border: 1px solid burlywood;
}

.ball {
  margin: calc(50% - 10px) auto 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: chocolate;
  animation: spin 3s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0turn) translateY(-70px) translateY(50%) rotate(1turn)
  }
  to {
    transform: rotate(1turn) translateY(-70px) translateY(50%) rotate(0turn);
  }
}

<div class="wrp">
  <div class="circle">
    <div class="ball"></div>
  </div>
</div>

Answer 2

Можно использовать CSS анимацию, с помощью правила @keyframes установить общие ключевые кадры. Такой вариант анимации является совсем не сложным, поэтому достаточно использовать ключевые слова from и to. Получить такую анимацию нам помогут свойства rotate и translateY. Вот пример такой анимации:

* {
  box-sizing: border-box;
}

.wrp {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  position: relative;
  margin-top: 20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: antiquewhite;
  border: 1px solid burlywood;
}

.ball {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: chocolate;
  animation: animate 2s cubic-bezier(0.7, 0.26, 0.4, 0.82) infinite;
}

@keyframes animate {
  from {
    transform: rotate(0deg) translateY(-60px);
  }
  to {
    transform: rotate(360deg) translateY(-60px);
  }
}

<div class="wrp">
  <div class="circle">
    <div class="ball"></div>
  </div>
</div>

Или в обратную сторону:

* {
  box-sizing: border-box;
}

.wrp {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  position: relative;
  margin-top: 20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: antiquewhite;
  border: 1px solid burlywood;
}

.ball {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: chocolate;
  animation: animate 2s cubic-bezier(0.7, 0.26, 0.4, 0.82) infinite;
}

@keyframes animate {
  from {
    transform: rotate(360deg) translateY(-60px);
  }
  to {
    transform: rotate(0deg) translateY(-60px);
  }
}

<div class="wrp">
  <div class="circle">
    <div class="ball"></div>
  </div>
</div>

БЛОГ НА HUSL

Движение элемента по кругу

Ответы (2 шт):