.animated .circle-1 {
    animation: animCircle1 4s ease 0s 1 normal forwards;
}
.animated .circle-2 {
    animation: animCircle2 4s ease 0s 1 normal forwards;
}
.animated {
    animation: animFull 4s ease 0s 1 normal forwards;
}

@keyframes animCircle1 {
    0%, 30% {
        transform: translate(0);
    }

    15% {
        transform: translate(-28px, 23px);
    }
}


@keyframes animCircle2 {
    0%, 30% {
        transform: translate(0);
    }

    15% {
        transform: translate(26px, -21px)
    }
}

@keyframes animFull {
    0%, 30% {
        transform: rotate(0);
    }

    60%, 100% {
        transform: rotate(1turn);
    }
}