次の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>
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんばんは
>どのようにしたらよいのでしょうか。
そもそもが、どのようにしたいのかがよくわかりませんね。
ご提示のソースだと「テスト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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
プログラミング言語の制作方法について
C言語・C++・C#
-
このjavascriptのif文、条件式になっていないですが、どういう意味ですか?
JavaScript
-
非同期通信で掲示板を作る際の送信画面はフォームである必要はありますでしょうか?
AJAX
-
-
4
javaのDBアクセス(基幹系レベル)の情報が欲しいです。
Java
-
5
htmlの修正方法を教えていただきたいです。
HTML・CSS
-
6
C言語 バッファについて。
C言語・C++・C#
-
7
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
8
htmlのエラーについて(デバッグ)
PHP
-
9
C言語について。
C言語・C++・C#
-
10
質問です。 配列が100以上の場合は、100単位で繰り返し処理を実行したいのですが、どのように処理を
Java
-
11
HTMLソースが表示のページのものではない
その他(プログラミング・Web制作)
-
12
VisualStudio2022でC言語プログラムで全角文字を使用すると不明なエラーが表示される
C言語・C++・C#
-
13
list の空は [] ってあわらすのに
Java
-
14
CSV出力を画面から選択したデータ項目のみを出力させたいです。
Java
-
15
プログラムの素朴な質問です 分岐するコードを書く時に、 /** * 関数 */ sub(){ ...
その他(プログラミング・Web制作)
-
16
disabled プロパティが表示されない原因が分からない
JavaScript
-
17
c言語
C言語・C++・C#
-
18
IT業界より楽に稼げる業界ってあるんですか?銀行とか?
その他(プログラミング・Web制作)
-
19
30枚=30ページですか? Wordで
Word(ワード)
-
20
C言語の関数と配列に関する質問
C言語・C++・C#
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
VBA コレクションに2次元配列...
-
C++ 共変 戻り値について
-
可変変数にアロー演算子を使いたい
-
fwriteで改行出来ない
-
エラーの理由が分りません。Pri...
-
PHP、ヒアドキュメント内でのIF...
-
ExcelVBAで部分一致(*)をしたい
-
VB.NETからVBAマクロ(引数)を呼...
-
Let's Encryptで自動更新がされ...
-
PHPでの画像の形式の変換
-
構造体の入れ子が構造体の場合...
-
PHP正規表現の難題・preg_repla...
-
「取得先」という表現について
-
Dosブロンプトでtabを出力したい
-
switch()文で値の大小比較
-
DTOとEntityの差は何ですか。
-
wordの差し込み印刷で文字...
-
バッチファイルでpingの結果を...
-
php 入力画面から確認表示画面...
-
ps3で久しぶりにCDの音楽情報取...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Let's Encryptで自動更新がされ...
-
VBA コレクションに2次元配列...
-
VB.NETからVBAマクロ(引数)を呼...
-
エラーの理由が分りません。Pri...
-
PHP、ヒアドキュメント内でのIF...
-
PHPでの画像の形式の変換
-
CSVファイルをブラウザのキャッ...
-
可変変数にアロー演算子を使いたい
-
次のhtml・cssでspan内の文字を...
-
VB.NETSystem.Xml 要素数を得る...
-
どういうプログラムを関数化を...
-
ExcelVBAで部分一致(*)をしたい
-
PHPの変数値をリンクさせたい
-
file_existsが動作しない
-
protectedなのにアクセスできな...
-
PHPプログラム上で「URLを直接...
-
ASPのResponse.WriteをPHPでは...
-
PHPでXMLの置換 replaceData
-
[C#]Arraylistに追加した構造体...
-
[C++]std:mapの扱いを教えて頂...
おすすめ情報