次のhtml・cssでspan内の文字を点滅させる

質問

次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。
但し、テスト1が表示されている間は、テスト2と3は消えており、
テスト2、3が表示されている間はテスト1が消えている状態にしたいです。
なぜか、反復の意味を持つdurationタグの後ろに連結して、duration:blinkはできませんでした。
<div class="test">
<span class="brinking1">テスト1</span>
<span class="brinking2">テスト2</span>
<span class="brinking3">テスト3</span>
</div>
<style>
.test {
margin: auto;
background-color: white;
position: relative;
}

.test blinking {
width: 50%;
animation-name: test;
-webkit-animation-name: test;
animation-duration:blink 10s;
-webkit-animation-duration: 10s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
opacity: 0;}

.test .brinking1 {
display: block;
margin: 0 auto;
}

.test .brinking2,.test .brinking3 {
animation-delay:5s;
-webkit-animation-delay:5s;
position: absolute;
top: 0;
left: 25%;
}

@keyframes test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
}

@-webkit-keyframes test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
}
</style>

回答No.1

t_hirai

試してないから分かりませんが、「.test blinking {」で、 「blinking」の前にドットがいるのではないでしょうか？