ドカベンCSS

ドカベンのタイトル風なアニメーションをさせるCSS

使い方

下記のファイルを読み込んでください。

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

<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>

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

<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になります。デザインが崩れる原因となりますので入れ子にするなどして対処してください。

Reona Oshima (totoraj)