CSS手書き風テキストアニメーション

inkscapeでテキストを作成

SVGは下記のようにタグ内に

テキストをパスへ変更する

テキストはパス化される

アニメーションCSSの設定

    <style>
        /* --- テキスト --- */
        path {
            fill: none; /* 1,塗りの色 */
            stroke: #000; /* 2,線の色 */
            stroke-dasharray: 2000; /* 3,破線の間隔 */
            stroke-dashoffset: 2000; /* 4,破線の開始位置 */
            stroke-width: 1; /* 5,線の太さ */
            animation: handwriting 3s ease-in forwards; /* 6,名前 時間 タイミング 終了後の状態 */
        }

        /* --- アニメーション --- */
        @keyframes handwriting {
            0% {
                fill: transparent; /* 1,塗りの色 */
                stroke-dashoffset: 2000; /* 4,破線の開始位置 */
            }
            50% {
                fill: transparent; /* 1,塗りの色 */
            }
            100% {
                fill: #000; /* 1,塗りの色 */
                stroke-dashoffset: 0; /* 4,破線の開始位置 */
            }
        }