第16回 SVG アニメーション３　文字をバウンド

Posted at 2026-09-06

はじめに

前回の記事で、もう少し見栄えのよさそうなものをトライしようということを書きました。
今回は、それを踏まえ、文字がバウンドするアニメーションを作ろうと思います。

今回実施する内容

「こんにちは」という文字が、一文字ずつ上から落ちてバウンドして落ち着くアニメーションを作成します。

ソースコード(Git Hub)

環境

OS: Windows 11 JP (64bit)
Edge: バージョン 152.0.4191.62 (公式ビルド) (64 ビット)

参考

なし

用語

なし

1. SMILで文字をバウンド

文字を1文字ずつバウンドさせます。

index.htmlの抜粋

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="100px" width="200px">
            <text x="0" y="40">こ
                <animate attributeName="y" values="20;45;30;43;35;40"  dur="1.5s" />
            </text>
            <text x="15" y="40">ん
                <animate attributeName="y" values="20;45;30;43;35;40"  dur="1.5s" begin="0.2s"/>
            </text>
            <text x="30" y="40">に
                <animate attributeName="y" values="20;45;30;43;35;40"  dur="1.5s" begin="0.4s"/>
            </text>
            <text x="45" y="40">ち
                <animate attributeName="y" values="20;45;30;43;35;40"  dur="1.5s" begin="0.6s"/>
            </text>
            <text x="60" y="40">は
                <animate attributeName="y" values="20;45;30;43;35;40"  dur="1.5s" begin="0.8s"/>
            </text>
        </svg>

SVG内にtext要素１つに一文字ずつ

「こ」、「ん」、「に」、「ち」、「は」

を設定します。
このtext要素ごとにanimate要素で、バウンド動作を設定します。

attributeName="y"はY軸の設定を変更する
values="20;45;30;43;35;40"は変更する値を「;」で区切って記載します。
dur="1.5s"は、これを1.5秒で実施する
begin="0.2s"は開始を0.2秒遅らせる。文字ごとに0.2秒ごと遅らせるように設定

values要素の動きは、以下の図の通りです。横軸はX軸なんですが、今回はX軸は変更していませんので、文字が上下するイメージでとらえてください。

同じ時間間隔（1.5秒）で動作しますので、自由落下してバウンドするのとは違いますが、個人的には違和感は感じませんでした。
文字を動かしているだけであり、ボールが落ちる様子でもないので、自由落下と感じることもないのでしょう。

2. CSSで文字をバウンド

上記と同じことをCSSで実現します。

index.htmlの抜粋

        <span class="bound">こ</span>
        <span class="bound delay2">ん</span>
        <span class="bound delay4">に</span>
        <span class="bound delay6">ち</span>
        <span class="bound delay8">は</span>

すでにSVGですらないのですが、SVGでも結局動作同じなのでSVGに閉じ込める必要もないだろうと思い、このようにしました。
classは、bound、delay2、delay4などにしています。 boundで文字をバウンドさせ、delayX`で実行タイミングをずらしています。

animation.css

div {
    background-color: #f0f0f0;
}

.bound {
    display: inline-block;
    animation: bounceOnce 1.5s;
}

.delay2 {
    animation-delay: 0.2s;
}

.delay4 {
    animation-delay: 0.4s;
}

.delay6 {
    animation-delay: 0.6s;
}

.delay8 {
    animation-delay: 0.8s;
}

@keyframes bounceOnce {
    0% {
        transform: translateY(-100%);
    }
    20% {
        transform: translateY(12.5%);
    }
    40% {
        transform: translateY(-50%);
    }
    60% {
        transform: translateY(6.25%);

    }
    80% {
        transform: translateY(-12.5%);

    }
    100% {
        transform: translateY(0%);
    }
}

`.bound`セレクター

これでバウンドさせます。
displayをinline-blockに設定し、animation: bounceOnce 1.5sで1.5秒で、bounceOnceの動作をするようにしています。

`.delay2`、`.delay4`などのセレクター

delay2やdelay4は開始タイミングをずらすために、animation-delay: 0.2sやanimation-delay: 0.4sを設定します。

`@keyframes boundOnce`

0%、20%...100%までY軸を移動させる動作です。
transform: translateY(-100%)で、Y軸を1文字分上に移動させます。SMILで記載したvalueでは値の20`に相当する部分です。
SMILでは具体的なY軸の値でしたが、CSSでは比率で設定しました。
CSSでも値で設定できると思いますが、どちらかというと比率で表示するほうが好ましいのかなとは思います。
そのほかについても同様に100%まで設定します。

おわりに

前回CSSでSVG内の円を動作させたときに、セレクターで動作させるのであれば、SVG内外によらず設定方法は同じなんだなと思いましたので、今回はCSSで作成した時はSVGにもしませんでした。
作ってみて、文字を動かすのも思ったよりも簡単なんだなと思いました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

第16回 SVG アニメーション３ 文字をバウンド