animation-delayで10秒以上の設定ができない

13文字程度の文字を一文字ずつ遅らせて表示したいと考えいています。
ですが、下記では、10秒以後の設定ができません。
msの方でも試してみたのですが、ダメでした。

html5
1<div class="loading">
2  <span>L</span>
3  <span>O</span>
4  <span>A</span>
5  <span>D</span>
6  <span>I</span>
7  <span>N</span>
8  <span>G</span><br>
9  <span>L</span>
10  <span>O</span>
11  <span>A</span>
12  <span>D</span>
13  <span>I</span>
14  <span>N</span>
15  <span>G</span>
16</div>
17

css
1.loading span {
2  display: inline-block;
3  margin: 0 -.075em;
4  animation: loading .7s infinite alternate;
5}
6.loading span:nth-child(2) {
7  animation-delay: .1s;
8}
9.loading span:nth-child(3) {
10  animation-delay: .2s;
11}
12.loading span:nth-child(4) {
13  animation-delay: .3s;
14}
15.loading span:nth-child(5) {
16  animation-delay: .4s;
17}
18.loading span:nth-child(6) {
19  animation-delay: .5s;
20}
21.loading span:nth-child(7) {
22  animation-delay: .6s;
23}
24.loading span:nth-child(8) {
25  animation-delay: .7s;
26}
27.loading span:nth-child(9) {
28  animation-delay: .8s;
29}
30.loading span:nth-child(10) {
31  animation-delay: .9s;
32}
33.loading span:nth-child(11) {
34  animation-delay: .10s;
35}
36.loading span:nth-child(12) {
37  animation-delay: .11s;
38}
39@keyframes loading {
40  0% {
41    transform: scale(1);
42  }
43  100% {
44    transform: scale(0.8);
45  }
46}