// X軸の関数
@function getPointX($t, $x1, $x2, $x3, $x4) {
  $tp: 1 - $t;
  $x: $tp * $tp * $tp * $x1 + 3 * $tp * $tp * $t * $x2 + 3 * $tp * $t * $t * $x3 + $t * $t * $t * $x4;

  @return $x + px;
}

// Y軸の関数
@function getPointY($t, $y1, $y2, $y3, $y4) {
  $tp: 1 - $t;
  $y: $tp * $tp * $tp * $y1 + 3 * $tp * $tp * $t * $y2 + 3 * $tp * $t * $t * $y3 + $t * $t * $t * $y4;

  @return $y + px;
}

@keyframes createBezier-3 {
  $startX: 0; // 開始位置X
  $startY: 0; // 開始位置Y
	$p1X: 0; // 制御点X1
  $p1Y: -35; // 制御点Y1
	$p2X: 100; // 制御点X2
	$p2Y: -65; // 制御点Y2
	$endX: 100; // 終了位置X
	$endY: -100; // 終了位置Y

  @for $i from 0 through 100 {
    #{$i}% {
    transform: translate(getPointX($i * 0.01, $startX, $p1X, $p2X, $endX), getPointY($i * 0.01, $startY, $p1Y, $p2Y, $endY));
    }
  }
}

.main {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 400px;
	margin: 30px auto;
}

.item {
	position: relative;
	display: block;
	width: 115px;
	height: 115px;
	margin-right: 10px;
}

.circle {
	position: absolute;
	top: 100px;
	left: 0px;
	width: 15px;
	height: 15px;
	background-color: #FCB374;
	border-radius: 50%;
	transform: translate(0px, 0px);
  animation-name: createBezier-3;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}