CSS erzielt den Effekt der Vermischung zweier Elemente (Sticky-Effekt)

<Stil>
    Körper{
        Rand: 0;
        Polsterung: 0;
    }
    .Kasten{
        Position: relativ;
        Breite: 500px;
        Höhe: 500px;
        Filter: Kontrast (20);
        /* Die Hintergrundfarbe muss eine Volltonfarbe sein, sonst verschwimmen die Kanten der beiden Elemente*/
        Hintergrundfarbe: #fff;
    }
    .Kreis-groß{
        Position: absolut;
        oben: 20px;
        links: 100px;
        Breite: 100px;
        Höhe: 100px;
        Randradius: 50 %;
        Filter: Unschärfe (6px);
        Box-Größe: Rahmenbox;
        Animation: nach rechts, 3 s, unendliches Herausfahren;
        Hintergrundfarbe: #333;
    }
    .Kreis-klein{
        Position: absolut;
        oben: 35px;
        links: 220px;
        Breite: 60px;
        Höhe: 60px;
        Randradius: 50 %;
        Filter: Unschärfe (6px);
        Box-Größe: Rahmenbox;
        Animation: nach links, 3 s, unendliches Auslaufen;
        Hintergrundfarbe: #FFFC00;
    }
    @keyframes nachRechts{
        50 %{
            links: 150px;
        }
    }
    @keyframes nach links{
        50 %{
            links: 150px;
        }
    }
</Stil>

<div Klasse="Box">
    <div Klasse="circle-big"></div>
    <div Klasse="circle-small"></div>
</div>