CSS simple loading animation is not iterating - css

Question

I have a simple CSS based loading animation that should iterate with infinite. However, the animation only runs once and stops. I'm surely missing something trivial but can't spot the error.
A related question, to shorten the CSS, can I join all the vendor specific selectors into one block, as in the following example?
#keyframes loading-dots,
#-webkit-keyframes loading-dots,
#-[other vendors...]
{
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
Any help is greatly appreciated.
Here is a snippet:
.loading-dots span {
display: inline-block;
height: 9px;
width: 9px;
background: #abb3b8;
-webkit-animation: loading-dots 0.8s infinite;
-moz-animation: loading-dots 0.8s infinite;
-ms-animation: loading-dots 0.8s infinite;
animation: loading-dots 0.8s infinite;
}
.loading-dots span:nth-child(2) {
visibility: hidden;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
visibility: hidden;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-webkit-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-moz-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-ms-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>

Answer 1

I suggest using opacity with any visibility animation check the code below with opacity .. because animating visibility or display is not a good idea as they are a 1/0 values that can't be animated
.loading-dots span {
display: inline-block;
opacity:0;
height: 9px;
width: 9px;
background: #abb3b8;
-webkit-animation: loading-dots 0.8s infinite;
-moz-animation: loading-dots 0.8s infinite;
-ms-animation: loading-dots 0.8s infinite;
animation: loading-dots 0.8s infinite;
}
.loading-dots span:nth-child(2) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#keyframes loading-dots {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes loading-dots {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes loading-dots {
0%{
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes loading-dots {
0% {
opacity:0;
},
100% {
opacity:1;
}
}
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>