テキストアニメーション

2025/02/16 CSS

HTML

<svg viewbox="0,0,100,80">
    <g font-size="90">
        <text x="50" y="40" text-anchor="middle" dominant-baseline="central">
            <tspan>Animation</tspan>
        </text>
    </g>
</svg>

描画サイズ … 幅100、高さ80

フォントサイズ … 90px

x=”50″ y=”40″ … テキストの中央点を50,40にする

text-anchor=”middle” … テキストの水平方向の配置を中央ぞろえにする

dominant-baseline=”central” … 垂直方向の配置を中央ぞろえにする

CSS

svg {
    fill: transparent;
    stroke: #333;
    stroke-width: 0.2px;
    stroke-dasharray: 3px 1px;　※2
    stroke-dashoffset: 10px;
    animation: move 2s ease infinite normal forwards; ※1
}
@keyframes move {
    0% {
        stroke-dashoffset: 0;
        stroke-opacity: 0;
        stroke-width: 0.1px;
        stroke-dasharray: 0px 20px;
    }
    100% {
        stroke-dashoffset: 20;
        stroke-opacity: 1;
        stroke-width: 0.5px;
        stroke-dasharray: 15px 0;
    }
}

※1 … animation: キーフレーム名　アニメーション時間　速度変化　再生回数　繰り返し方法　終了後のスタイル設定

※2 … 破線の長さが3pxで、破線の間隔が1px

BACK