一文字ずつ表示されるボタン

初心者で無知です。

マウスオーバーすると一文字ずつフェードインしつつ表示されるボタンを作成したいです。
マウスアウトするとフェードアウトして文字は非表示になります。

流れ↓
1.文字非表示
2.マウスオーバー
3.一文字ずつフェードインしつつ表示
4.マウスアウト
5.全文字フェードアウトで非表示

サンプルを試しつつ作成しましたが、いまいち再現できません。
お力添え頂ければ幸いです。

追記です。
下記質問を参考に致しました。
cssで文字を一文字ずつゆっくりと表示させたい

下記、再現できずにいるコードです。
流れの5ができません。

■HTML
<div id="sample">
	<a href="#" class="text">
		<span class="c1">あ</span><span class="c2">い</span><span class="c3">う</span>
	</a>
</div>

■CSS
#sample a {
	border:1px solid #CCC;
	padding:15px;
}
.text .c1, .text .c2, .text .c3, .text .c4, .text .c5, .text .c6 {
	animation:ease-in-out;
	opacity:0;
}
#sample a:hover .c1, #sample a:hover .c2, #sample a:hover .c3, #sample a:hover .c4, #sample a:hover .c5, #sample a:hover .c6 {
	opacity: 0;
	animation: 2.0s ease-in-out forwards fadeIn;
}
#sample a:hover .c1 { animation-delay: 0.0s; }
#sample a:hover .c2 { animation-delay: 0.5s; }
#sample a:hover .c3 { animation-delay: 1.0s; }
@keyframes fadeIn {
	to { opacity: 1;
	animation: ease-in-out; }
}

hatena19

2021/10/10 06:40

> サンプルを試しつつ作成しましたが、いまいち再現できません。どこのサンプルを参考にしたのかリンクなどを提示しましょう。再現できなくてもいいので、現状のHTMLとCSSのコードを提示しましょう。

行動規範の内容に同意します

回答1件

ベストアンサー

フェードイン、フェードアウトのシンプルなものなら、transition で実装したほうがシンプルになりますね。

css
1#sample a {
2  border:1px solid #CCC;
3  padding:15px;
4}
5#sample a .c1,
6#sample a .c2,
7#sample a .c3  {
8  opacity: 0;
9  transition: 1.0s;
10}
11#sample a:hover .c1,
12#sample a:hover .c2,
13#sample a:hover .c3 {
14  opacity: 1;
15  transition: 2.0s;
16}
17#sample a:hover .c1 { transition-delay: 0.0s; }
18#sample a:hover .c2 { transition-delay: 0.5s; }
19#sample a:hover .c3 { transition-delay: 1.0s; }