<div class="main">
  <div class="item">
    <span class="circle circle-1"></span>
    <img src="https://dl.dropbox.com/s/w122vt8acvkmbs5/circle-1.jpg?dl=0" width="115px" height="115px">
  </div>
  <div class="text">
    <p>
      $startX: 0; // 開始位置X<br>
      $startY: 0; // 開始位置Y<br>
      $p1X: 0; // 制御点X1<br>
      $p1Y: -100; // 制御点Y1<br>
      $p2X: 100; // 制御点X2<br>
      $p2Y: 0; // 制御点Y2<br>
      $endX: 100; // 終了位置X<br>
      $endY: -100; // 終了位置Y
    </p>
  </div>
</div>
// 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-1 {
  $startX: 0; // 開始位置X
  $startY: 0; // 開始位置Y
	$p1X: 0; // 制御点X1
  $p1Y: -100; // 制御点Y1
	$p2X: 100; // 制御点X2
	$p2Y: 0; // 制御点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-1;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.