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 
  1. .animated-arc:after {
  2.     width: 15px;
  3.     height: 15px;
  4.     border-radius: 50%;
  5.     background: #fff;
  6.     content: '';
  7.     display: block;
  8.     top: 111px;
  9.     left: -1px;
  10.     position: relative;
  11.     animation: xxxx 3s linear infinite;
  12.  
  13. }
  14.  
  15. @keyframes xxxx {
  16.     0% {
  17.         transform: rotate(180deg)
  18.         translate(-116px)
  19.         rotate(-180deg);
  20.     }
  21.     100% {
  22.         transform: rotate(90deg)
  23.         translate(-116px)
  24.         rotate(-90deg);
  25.     }
  26. }
[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 
  1. @keyframes xxxx {
  2.     0% {
  3.         transform: rotate(180deg)
  4.         translate(-116px)
  5.         rotate(-180deg);
  6.     }
  7.     45% {
  8.         transform: rotate(90deg)
  9.         translate(-116px)
  10.         rotate(-90deg);
  11.     }
  12.     55% {
  13.         transform: rotate(90deg)
  14.         translate(-116px)
  15.         rotate(-90deg);
  16.     }
  17.     100% {
  18.         transform: rotate(180deg)
  19.         translate(-116px)
  20.         rotate(-180deg);
  21.     }
  22. }
[HTML] pobierz, plaintext