三秒間だけcssでつくった読み込みマークを表示させたい。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・繰り返し表示がわからない、JavaScriptで数秒経ったら文字を表示させるようにしたい

### 該当のソースコード

```JavaScript、css
ソースコード

試したこと

<script> let count = 0; const countUp = () =>{ console.log(count++); } const intervalId = setInterval(() =>{ countUp(); if(count > 5){　 clearInterval(intervalId);　 }}, 1000); </script>

.one .loader,
.one .loader:before,
.one .loader:after {
background-color: #fff; /* アイコンの色 /
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.one .loader:before,
.one .loader:after {
position: absolute;
top: 0;
content: '';
}
.one .loader:before {
left: -1.5em;
}
.one .loader {
font-size: 10px; / アイコンのサイズ /
text-indent: -9999em;
margin: 4.3em auto;
position: relative;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.one .loader:after {
left: 1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #fff; / アイコンの色 /
height: 4em;
}
40% {
box-shadow: 0 -2em #fff; / アイコンの色 /
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #fff; / アイコンの色 /
height: 4em;
}
40% {
box-shadow: 0 -2em #fff; / アイコンの色 */
height: 5em;
}
}</style>

ここに問題に対して試したことを記載してください。
###このcssを一定時間繰り返したいです。
ググってもよくわからなくて

補足情報（FW/ツールのバージョンなど）

html5
ここにより詳細な情報を記載してください。
長文失礼しました。
お時間あればお教えてください、、、

Comments

[runnynose]

> 長文失礼しました。
まともに見れる文章までスクロールしたらここにたどり着きました。
まだ何かを質問された感じはなかったので謝る必要はありません????(と皮肉を言ってみます)

今一度、ご自身が記載されている質問内容を見直してみて下さい。
これで何かが伝わるとは思いませんでした。

[yatu_bachi__]

ご指摘ありがとうございます

Answer 1

微調整はご自身でお願いします。
animation: load1 1s infinite ease-in-out;→animation: load1 1s 3 ease-in-out;

infinite
アニメーションは無制限に繰り返されます。
animation-iteration-count - CSS: カスケーディングスタイルシート | MDN

Comments

[yatu_bachi__]

ありがとうございます
やってみます