詳しい人求む！

次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。

締切済

質問者：福本英一
質問日時：2023/11/26 16:47
回答数：1件

次の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>

通報する

この質問は特に40代・男性の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2023/11/26 18:37

こんばんは

＞どのようにしたらよいのでしょうか。
そもそもが、どのようにしたいのかがよくわかりませんね。

ご提示のソースだと「テスト2」と「テスト3」は重なって表示されるけれど、それらの点滅のタイミングをずらしているわけでもなさそうだし、単に重なっているだけなので、どうしたいのでしょうね。
また、
＞テスト1が表示されている間は、テスト2と3は消えており、
＞テスト2、3が表示されている間はテスト1が消えている状態にしたいです
　・テスト1が先に何度か点滅して、消えてから、テスト2・テスト3が点滅する
　・両方同時に点滅するが、表示するタイミングを半サイクルずらしたい
なのかも明確には読み取れません。

以下は、spanのレイアウトは無視して（＝通常のレイアウト）、点滅のタイミングは上記のうちの後者として解釈したサンプルです。
時間間隔なども適当なので、表示レイアウトと併せてお好みに修正してください。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.test {
background-color: white;
}
.test span {
margin: 1em; opacity: 0;
animation: test 1s infinite .5s;
}
.test span:first-child {
animation: test 1s infinite 0s;
}

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

</head>
<body>
<div class="test">
<span>テスト1</span>
<span>テスト2</span>
<span>テスト3</span>
</div>
</body>
</html>