線が書かれていくアニメーション

CSS

SVG画像の作成

まず、PNGからSVGへ変換します【https://www.freeconvert.com/ja/png-to-svg】

SVGをメモ帳で開いてSVGタグを取得すると、次のようなコードが得られます

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    viewbox="左上のX座標, 左上のY座標, width, height">
    <g>  // オブジェクトをグループ化するためのタグ
        <path d=""></path>  // d属性の中のパス図形を描画するタグ
    </g>
</svg>

線が書かれていくアニメーション

path, line {
    stroke: #333;
    stroke-width: 0.5px;
    stroke-dasharray: 400px;
    animation: writing 2s ease-in both;
}

@keyframes writing {
    0% {
        fill: transparent;
        stroke-dashoffset: 400px;
    }
    80% {
        fill: transparent;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

stroke-dasharray … 破線のピッチ

stroke-dashoffset … 破線の開始位置がマイナス方向にズレる

fill … 図形の塗りの色

BACK