CSS単純読み込みアニメーションは反復されません

Question

単純なCSSベースの読み込みアニメーションは、infiniteと繰り返す必要があります。ただし、アニメーションは1回だけ実行され、停止します。私は確かに何かを逃しているが、エラーを見つけることはできません。

関連する質問は、CSSを短縮するために、以下の例のようにベンダー固有のセレクタをすべて1つのブロックに参加させることはできますか？

@keyframes loading-dots, 
@-webkit-keyframes loading-dots, 
@-[other vendors...] 
{ 
    0%, 
    100% { 
    visibility: hidden; 
    } 
    50% { 
    visibility: visible; 
    } 
} 

ご協力いただきまして誠にありがとうございます。ここで

がスニペットです：

.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

私は、任意の可視性のアニメーションで不透明度を使用することをお勧め不透明で以下のコードをチェックし... visibilityかdisplayをアニメーション化することは、彼らのように良いアイデアではありませんので、アニメーションすることはできません1/0値は

.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>