Движение шара по траектории?

Рейтинг: 1Ответов: 1Опубликовано: 10.01.2023

Подскажите, у меня анимация движение шарика по offset-path, но она прерывается и шарик идет в обратную сторону. Как можно сделать так что-бы она не прерывалась а просто по это траектории всегда двигался в одно сторону? https://jsfiddle.net/0arsykgz/2/ Спасибо

.right-main-integration__path-circle {
  --duration: 9000ms;
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ff9100;
  offset-rotate: reverse;
  animation: move-along var(--duration) 0ms infinite alternate ease-in-out;
  offset-path: path("M103.5 21V267.5V497.5C103.5 508.546 94.5457 517.5 83.5 517.5H21C9.9543 517.5 1 526.454 1 537.5V565C1 576.046 9.9543 585 21 585H160C171.046 585 180 593.954 180 605V664C180 675.046 188.954 684 200 684H361.5C372.546 684 381.5 675.046 381.5 664V21C381.5 9.95431 372.546 1 361.5 1H123.5C112.454 1 103.5 9.9543 103.5 21Z");
}

;

.right-main-integration__path-circle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: blur(1px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff9100;
}

@keyframes move-along {
  100% {
offset-distance: 100%;
  }
}
<div class="right-main-integration__path-1">
  <svg width="383" height="685" viewBox="0 0 383 685" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M103.5 21V267.5V497.5C103.5 508.546 94.5457 517.5 83.5 517.5H21C9.9543 517.5 1 526.454 1 537.5V565C1 576.046 9.9543 585 21 585H160C171.046 585 180 593.954 180 605V664C180 675.046 188.954 684 200 684H361.5C372.546 684 381.5 675.046 381.5 664V21C381.5 9.95431 372.546 1 361.5 1H123.5C112.454 1 103.5 9.9543 103.5 21Z" stroke="#2D2D2D" stroke-width="2" stroke-linecap="round" stroke-dasharray="8 8" />
  </svg>
  <div class="right-main-integration__path-circle"></div>
</div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Убратьл лишний код.

.right-main-integration__path-circle {
  --duration: 9000ms;
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ff9100;
  animation: move-along var(--duration) infinite ease-in-out;
  offset-path: path("M103.5 21V267.5V497.5C103.5 508.546 94.5457 517.5 83.5 517.5H21C9.9543 517.5 1 526.454 1 537.5V565C1 576.046 9.9543 585 21 585H160C171.046 585 180 593.954 180 605V664C180 675.046 188.954 684 200 684H361.5C372.546 684 381.5 675.046 381.5 664V21C381.5 9.95431 372.546 1 361.5 1H123.5C112.454 1 103.5 9.9543 103.5 21Z");
}

;
.right-main-integration__path-circle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: blur(1px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff9100;
}

@keyframes move-along {
  100% {
    offset-distance: 100%;
  }
}
<div class="right-main-integration__path-1">
  <svg width="383" height="685" viewBox="0 0 383 685" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M103.5 21V267.5V497.5C103.5 508.546 94.5457 517.5 83.5 517.5H21C9.9543 517.5 1 526.454 1 537.5V565C1 576.046 9.9543 585 21 585H160C171.046 585 180 593.954 180 605V664C180 675.046 188.954 684 200 684H361.5C372.546 684 381.5 675.046 381.5 664V21C381.5 9.95431 372.546 1 361.5 1H123.5C112.454 1 103.5 9.9543 103.5 21Z" stroke="#2D2D2D" stroke-width="2" stroke-linecap="round" stroke-dasharray="8 8" />
  </svg>
  <div class="right-main-integration__path-circle"></div>
</div>
Если необходи что бы движение было линейным, то убрать ещё и ease-in-out;