CSSは2つの要素をブレンドする効果（スティッキー効果）を実現します。

<スタイル>
    体{
        マージン: 0;
        パディング: 0;
    }
    。箱{
        位置: 相対的;
        幅: 500ピクセル;
        高さ: 500px;
        フィルター:コントラスト(20);
        /* 背景色は単色でなければなりません。そうでないと、2 つの要素の端がぼやけてしまいます */
        背景色: #fff;
    }
    .circle-big{
        位置: 絶対;
        上: 20px;
        左: 100px;
        幅: 100ピクセル;
        高さ: 100px;
        境界線の半径: 50%;
        フィルター: ぼかし(6px);
        ボックスのサイズ: 境界線ボックス;
        アニメーション: toRight 3s イーズアウト 無限;
        背景色: #333;
    }
    .circle-small{
        位置: 絶対;
        上: 35px;
        左: 220px;
        幅: 60ピクセル;
        高さ: 60px;
        境界線の半径: 50%;
        フィルター: ぼかし(6px);
        ボックスのサイズ: 境界線ボックス;
        アニメーション: toLeft 3s イーズアウト 無限;
        背景色: #FFFC00;
    }
    @keyframes を右へ{
        50%{
            左: 150px;
        }
    }
    @keyframesを左に{
        50%{
            左: 150px;
        }
    }
</スタイル>

<div class="box">
    <div class="circle-big"></div>
    <div class="circle-small"></div>
</div>