Точки от анимации CSS слева направо к правой улитке в центре [закрыто] ⇐ CSS

[Anonymous]

Я пытаюсь отобразить горизонтальный эллипсис или стержень точек, но его анимация CSS выходит в центр анимации. Анимация резюме возобновит движение от правой границы к левой границе (как будто она была бесконечно слева направо). < /P>
Мой результат почти идентичен, за исключением того, что в середине анимации (где линейное облегчение), то точки внезапно имеют изменение скорости, которое вызывает у них Snail. Class = "Snippet-Code">
html, body {
background: #000;
}

body {
--size: 0.6rem;
--time: 4000ms;
--r: -14%; /* left in percentage */
--color: white;
--m: 30ms;
}

.progress-ellipsis {
position: relative;
width: 100%;
height: var(--size);
overflow: hidden;
}

.progress-ellipsis__circle {
position: absolute;
left: 62.5%;
animation: move var(--time) infinite;
width: var(--size);
height: var(--size);
background: var(--color);
border-radius: 100%;
opacity: 0;
}

.progress-ellipsis__circle:nth-of-type(2) { left: var(--r) }
.progress-ellipsis__circle:nth-of-type(3) { left: calc(var(--r) * 2) }
.progress-ellipsis__circle:nth-of-type(4) { left: calc(var(--r) * 3) }
.progress-ellipsis__circle:nth-of-type(5) { left: calc(var(--r) * 4) }
.progress-ellipsis__circle:nth-of-type(2) { animation-delay: calc(var(--time) / var(--m)) }
.progress-ellipsis__circle:nth-of-type(3) { animation-delay: calc(var(--time) / calc(var(--m)*2)) }
.progress-ellipsis__circle:nth-of-type(4) { animation-delay: calc(var(--time) / calc(var(--m)*3)) }
.progress-ellipsis__circle:nth-of-type(5) { animation-delay: calc(var(--time) / calc(var(--m)*4)) }

@keyframes move {
0% {
left: 10%;
opacity: 1;
animation-timing-function: ease-out;
}

30% {
left: 50%;
animation-timing-function: linear;
}

50% {
left: 65%;
opacity: 1;
animation-timing-function: linear;
}

60% {
left: 100%;
animation-timing-function: ease-in;
opacity: 0;
}

85% {
left: -50%;
animation-timing-function: linear;
}

100% {
left: -50%;
animation-timing-function: linear;
}
}< /code>



< /code>
< /div>
< /div>
< /p>
По какой -то причине другие точки не появляются в приведенном выше фрагменте. Но вы можете видеть, что единственная точка там улитки (внезапно останавливается на немного) в центре; То есть, если вы посмотрите на это внимательно, это изменяет скорость в течение короткого времени в центре неравномерным способом. 8.1 GIF):


Подробнее здесь: https://stackoverflow.com/questions/795 ... the-center