SVGでのテキストアニメーション

Question

以下のサイトのように、テキストアニメーションを実装したいのですが
https://codepen.io/ARS/pen/pjypwd

1."IN ONE PIECE" がアニメーションで表示される
2."IN ONE PIECE" がアニメーションで消える
3."SECOND TEXT" がアニメーションで表示される
4."SECOND TEXT" がアニメーションで消える

1～4をループさせたいと思っています。
サイト上では1.2.までしかできず
3.4.をどう実装していいか手詰まりの状態です。

ご教授いただければ幸いです。

Answer 1

"IN ONE PIECE"に当たるポリゴンはありますが、
"SECOND TEXT"のポリゴンが見当たらないので、
まずはそれを用意するところからでしょう

Comments

[hachiro]

ご回答ありがとうございます。
<figure>～</figure>タグをもうひとつ追加して
そこにポリゴンを用意してみましたが
"IN ONE PIECE" "SECOND TEXT" が同時に出てしまいます。
"IN ONE PIECE"が消えてから、次の文字を出す方法が
どうにも分かりません。。。