テキストの文字が一個ずつ2pxくらい浮かぶようなアニメーションが作りたいです。

とある映画のサイトのロード画面で文字がぴょんぴょん跳ねるようなアニメーションがあったので、
真似してみたいと考えました。
リンクを挿入しておきます。リンク内容

HTML5
1コード<body>
2
3  <header>
4
5    <div class="header-ttl">
6
7      <h1 class="winter">ふゆものがたり</h1>
8
9    </div>
10
11  </header>
12
13  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
14  <script src="js/script.js"></script>
15</body>

CSS
1コード.header-ttl {
2    text-align: center;
3    margin-top: 50px;
4}
5
6.winter {
7    color: #868686;
8    letter-spacing: 2px;
9    animation:pyon 1.8s steps(7) infinite;
10}
11
12@keyframes pyon{
13
14    100% {
15        transform: translateY(-5px);
16    }
17
18}

参考にしたサイトを検証してみたりしましたがわかりませんでした。

m.ts10806

2019/02/14 08:29

起きている現象やエラーなどあれば追記してください。また、script.jsは何でしょうか。

dream

2019/02/14 10:42

エラーなどは出ていないのですが、今のコードだと一個ずつではなくテキスト全体が同時に動いてしまっているのでそこをなんとかしたいなと。それからjsは無視してもらって結構です。

m.ts10806

2019/02/14 10:52

何に困っているか、詰まっているかを書かれないと回答者も何に対してどのような方向性のアドバイスをしたらいいかわかりませんので、エラーがでないのでしたらエラーがでない状態のコードにして、追記してください

dream

2019/02/14 12:13

書いたテキストが七文字なので、animationの部分にsteps(7)と記述したのですが、別々に動いてくれません。どうしたらいいですか？

m.ts10806

2019/02/14 12:16

質問は編集できるので適宜ご対応ください。質問本文に書かないと伝わるものも伝わりませんし、言いたいことだけ言っても要件としては伝わりません

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

回答2件

ベストアンサー

~~SVGで実現可能かと思ってます。~~

SVG - Animated Text Path - JSFiddle
jsfiddle.net › bradyhouse

~~pathに沿って文字が移動するサンプルです。~~
~~- 公開している方に感謝~~

~~pathを動的に一文字文だけ凸状態にしていけば実現可能かと思ってます。~~

継ぎ接ぎですが...作ってみました。SVGおもしろい。

~~1文字幅分だけ凸状態は難しい（フォント1文字にピタリ合わせる必要が有るかも）~~
不連続なパスにする事で1文字だけピコっと上がるのが実現できました。
円弧のも面白いので残しました。。

SVG
1<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px" viewBox="-500 -500 1000 1000">
2  <path id="p1" d="M10,400" stroke="blue" fill="none" stroke-width="3" />
3  <text font-family="courier" font-size="32" fill="black">
4    <textPath xlink:href="#p1">Hello, here is some text animated along a crazy path.</textPath>
5    <animate xlink:href="#p1" 
6      attributeName="d" 
7      from="M10,400 l 0,0 m 0,-5 l 10,0 m 0,5 l 500,0" 
8      to="M10,400 l 500,0 m 0,-5 l 10,0 m 0,5 l 0,0"
9      dur="5s" 
10      fill="freeze" 
11      repeatCount="indefinite" />
12  </text>
13
14  <path id="p2" d="M10,300" stroke="blue" fill="none" stroke-width="3" />
15  <text font-family="courier" font-size="32" fill="black">
16    <textPath xlink:href="#p2">Hello, here is some text animated along a crazy path.</textPath>
17    <animate xlink:href="#p2" 
18      attributeName="d" 
19      from="M10,300 l 0,0 a 5,5 -0 0,1 20,-0  l 500,0" 
20      to="M10,300 l 500,0 a 5,5 -0 0,1 20,-0  l 0,0"
21      dur="5s" 
22      fill="freeze" 
23      repeatCount="indefinite" />
24  </text>
25
26</svg>