[CSS] Animacja Opcje

[LarCal]

Witam,
Jak mogę zrobić płynne odbicie kółeczka? Obecnie przesuwa się z lewej do prawej, a chciałbym aby leciało od lewej do prawej a potem od prawej do lewej i tak w kółko.

[HTML] pobierz, plaintext 
.animated-arc:after {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    content: '';
    display: block;
    top: 111px;
    left: -1px;
    position: relative;
    animation: xxxx 3s linear infinite;
 
}
 
@keyframes xxxx {
    0% {
        transform: rotate(180deg)
        translate(-116px)
        rotate(-180deg);
    }
    100% {
        transform: rotate(90deg)
        translate(-116px)
        rotate(-90deg);
    }
}
[HTML] pobierz, plaintext 

Podgląd: https://i.gyazo.com/ad5f35fbc01db62b5a6ca2f35a24359e.mp4

// edit
udało mi się zrobić wracanie lecz nie jest to płynne, jest sekundowy przestój przy lewej krawędzi.

[HTML] pobierz, plaintext 
@keyframes xxxx {
    0% {
        transform: rotate(180deg)
        translate(-116px)
        rotate(-180deg);
    }
    45% {
        transform: rotate(90deg)
        translate(-116px)
        rotate(-90deg);
    }
    55% {
        transform: rotate(90deg)
        translate(-116px)
        rotate(-90deg);
    }
    100% {
        transform: rotate(180deg)
        translate(-116px)
        rotate(-180deg);
    }
}
[HTML] pobierz, plaintext 

Ten post edytował LarCal 17.03.2020, 13:04:45