``````<div class="main">
<div class="item">
<span class="circle circle-4"></span>
<img src="https://dl.dropbox.com/s/g828ggmog3toh72/circle-3.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: -35; // 制御点Y1<br>
\$p2X: 100; // 制御点X2<br>
\$p2Y: -65; // 制御点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-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;
transform: translate(0px, 0px);
animation-name: createBezier-3;
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.