cssのanimationで、文字が入力された後キャレットのみ消えて文字は残したままにできない。

Question

コード
<span class="names">×××</span>
<h1 class="nameh">〇〇〇〇</h1>

コード
@keyframes typing { from { width: 0; } }
@keyframes caret { 50% { border-color: transparent; } }

.names{
  display: inline-block;
  width: 10em;
  border-right: .08em solid;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 5s steps(10,end), caret .5s step-end infinite;
}

.nameh {
  font-size:3em;
  font-family: monospace;
  width:15em;
  border-right: .08em solid;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 7s steps(12, end) 5s both, caret .5s step-end infinite 5s;
  letter-spacing:.5rem;
}

上記のコードで、.namesクラスのanimationが終わったら、.namehクラスのanimaitonが動くようになっています。
ただ、.namesクラスのanimation が終わったら、×××の文字は残して、キャレットは消したいのですが、.namehクラスが始まっても、ずっと残っています。
イメージとしては、×××と〇〇〇が続けて入力される感じにしたいので、.nameクラスのcaretはtypingのanimation終了後に消して、次の.namehクラスが始まるときに、キャレットが現れて文字入力が始まり、〇〇〇の入力が終わった時はキャレットは残っていて大丈夫です。

@keyframes caretに 0%{opacity:0;}などを入力しても解決できません。
animation-fill-modeはどの値にしても、typingの方まで影響していまいます。

ご教授、宜しくお願いします。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

こんにちは。

animation-fill-mode: none;の場合、アニメーションが実行されていない時にはアニメーションのスタイルが適用されません。
ですので、終わった後にキャレットを消したいなら、アニメーションではないスタイルを変更する必要があります。

サンプル

/* キーフレームに from を追加 */
@keyframes caret { 0% {border-color: black;} 50% { border-color: transparent; } }

/* ボーダーを透明に */
  border-right: .08em solid transparent;

/* animation-iteration-count を infinite から変更して、10回で終了する（回数は調整してください）*/
  animation: typing 5s steps(10,end), caret .5s step-end 10;

Comments

[RT2]

回答ありがとうございます。
何とか、解決できました。
また、宜しくお願いします。