ドカベンCSS

使い方

ダウンロードしたCSSを読み込みます。

<link rel="stylesheet" href="./dokaben.css">

あとはアニメーションさせたい要素にclassを追加するだけです！

これはテストです

<p class="dokaben dkbn-loop">これはテストです</p>

文章の中のここだけがアニメーションされます。

<p>文章の中の<span class="dokaben dkbn-loop">ここだけ</span>がアニメーションされます。</p>

コマオトシアリとコマオトシ　ナシ

<p>
	<span class="dokaben dkbn-loop dkbn-steps dkbn-text">コマオトシ アリ</span>
	と
	<span class="dokaben dkbn-loop dkbn-text">コマオトシ　ナシ</span>
</p>

<a href="#" class="dkbn-hover"><span class="dokaben dkbn-loop2">ここにマウスがのると動くよ</span></a>

ドカベン

<p class="dkbn-text" style="font-size: 2em;">ドカベン</p>

ハヤイヤツ

<p class="dokaben dkbn-loop dkbn-text" style="animation-duration: 1000ms; font-size: 2em;">ハヤイ ヤツ</p>

カクカク

<p class="dokaben dkbn-loop dkbn-text" style="animation-timing-function: steps(10); font-size: 2em;">カクカク</p>

class	説明
`.dokaben`	アニメーションさせたい要素につける
`.dkbn-up`	起き上がるアニメーション
`.dkbn-down`	倒れるアニメーション
`.dkbn-loop`	up → down → up...の繰り返し
`.dkbn-loop2`	down → up → down...の繰り返し
`.dkbn-down-no`	倒れた状態にする
`.dkbn-steps`	アニメーションがコマ落ち(18コマ/1アニメーション)になる
`.dkbn-hover`	これを付けた要素がホバーされたときに子要素の`.dokaben`がアニメーションを開始する
`.dkbn-text`	ドカベンっぽい文字にする

.dokabenを指定した要素はdisplay: inline-blockになります。デザインが崩れる原因となりますので入れ子にするなどして対処してください。

タイトル画像でsm29720917のフォントを使わせていただいています。

何か問題がございましたら作者Twitterまでご連絡をお願いします。