Animated dots with css, making them move forever - css

Question

I can't seem to make this animation move forever without adding more dots in span.
I would like the amount of dots not to be dependent on the "loading-dots" class, as it is adding more dots increases the duration but its a pain. Could it be possible to have a single dot but animate it forever. I like the ability to change the speed and direction.
Here's the CodePen
* {
box-sizing: border-box;
}
body {
padding: 50px;
background: white;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 20px 0px 20px;
}
.loading-container {
overflow: hidden;
float: left;
width: 200px;
}
.loading-dots {
display: inline-block;
animation-name: loading-dots;
animation-duration: 5s;
animation-timing-function: linear;
font-size: 50px;
position: relative;
top: -27px;
color: rgba(blue, 1);
font-family: sans-serif;
white-space: no-wrap;
}
.loading-title {
overflow: display;
position: relative;
font-size: 30px;
top: 10px;
margin-right: 10px;
font-family: monospace;
color: rgba(white, 1);
float: left;
}
#keyframes loading-dots {
0% {
transform: translateX(-600px);
}
100% {
transform: translateX(0px);
}
}
<div class="container">
<span class="loading-title"></span>
<div class="loading-container">
<span class="loading-dots">.................
</span>
</div>
</div>

Answer 1

You can do this with a simple background where it will be easy to control the animation and also the dimension of your dots:
.dots {
height:5px; /*to control the overall height*/
width:200px; /*to control the overall width*/
margin:50px;
background-image:
repeating-linear-gradient(to right,
transparent,transparent 5px, /*5px of transparent*/
blue 5px,blue 10px); /*then 5px of blue */
background-size:200% 100%;
animation:change 3s linear infinite;
}
#keyframes change{
to {
background-position:right;
}
}
<div class="dots"></div>
To change the direction you simply change the position:
.dots {
height:5px;
width:200px;
margin:50px;
background-image:
repeating-linear-gradient(to right,
transparent,transparent 5px,
blue 5px,blue 10px);
background-size:200% 100%;
background-position:right;
animation:change 3s linear infinite;
}
#keyframes change{
to {
background-position:left;
}
}
<div class="dots"></div>
You can check this for more details about the different values used: Using percentage values with background-position on a linear gradient
Another idea using animation on transform :
.dots {
height:5px;
width:200px;
margin:50px;
position:relative;
overflow:hidden;
}
.dots::before {
content:"";
position:absolute;
top:0;
left:0;
right:-100%;
bottom:0;
background-image:
repeating-linear-gradient(to right,
transparent,transparent 5px,
blue 5px,blue 10px);
animation:change 3s linear infinite;
}
#keyframes change{
to {
transform:translateX(-50%);
}
}
<div class="dots"></div>
Changing the direction:
.dots {
height:5px;
width:200px;
margin:50px;
position:relative;
overflow:hidden;
}
.dots::before {
content:"";
position:absolute;
top:0;
left:-100%;
right:0;
bottom:0;
background-image:
repeating-linear-gradient(to right,
transparent,transparent 5px,
blue 5px,blue 10px);
animation:change 3s linear infinite;
}
#keyframes change{
to {
transform:translateX(50%);
}
}
<div class="dots"></div>

Answer 2

Reduce the negative pixel margin. -600px is pretty excessive for 16 dots.
#keyframes loading-dots {
0% {
transform: translateX(-50px);
}
100% {
transform: translateX(0px);
}
}