簡単なハンドライティングっぽいアニメーションの実装

SVGをゴニョゴニョやる？

一つだけ大きくどーん！って置くだけならそれでもいいですけど、違う単語でいくつもパラパラと置くとなるとそんなことやってられないですよね。

ではそれっぽくCSSだけでやってしまおう

HTMLはこんな感じで、

<div class="hand-writing">
   <span>Comming Soon</span>
</div>

CSSを下記のようにします。

.hand-writing {
    position: absolute;
    clip: rect(0 0 100px 0); //ここの高さは適当に。文字の高さより低くなければOK
    transform: skew(-30deg); //ここの角度はフォントの斜め具合に合わせて決める
    transition: clip 3s ease-in-out 0s; 
　　　　　　　　//いろいろ試したがease-in-outが一番それっぽくなりました。
}

.hand-writing > span {
    position: absolute;
    left: 20px;　//親要素からはみ出た分を微調整
    top: 0;
    transform: skew(30deg);　//正位置に戻す。absoluteになっていないと効かないので注意
}

そして例えば可視領域に入ったら.is-animatedというクラスを付与するみたいなことをしてあげて、

.hand-writing.is-animated　 {
    clip: rect(0 300px 100px 0); //ここの幅は適当に。文字の幅より広くなればOK
}

こうすることで簡単なハンドライティングっぽいアニメーションが実装でき、こんな感じになります。

以上です！