プルプルと震える動きを実装できる『CSShake』を使ってみる

classを追加するだけで、プルプルと震える動きを実装できる『CSShake』を使ってみます。

サンプルコード

CSShakeの公式サイトからファイルをダウンロードして、CSSファイルを読み込みます。

<link rel="stylesheet" href="./csshake.min.css">

.shakeや.horizontalなど、用意されているアニメーションのclassを付与します。

HTML

<div class="box shake">.shake</div>
<div class="box shake-hard">.shake-hard</div>
<div class="box shake-slow">.shake-slow</div>
<div class="box shake-little">.shake-little</div>
<div class="box shake-horizontal">.shake-horizontal</div>
<div class="box shake-vertical">.shake-vertical</div>
<div class="box shake-rotate">.shake-rotate</div>
<div class="box shake-opacity">.shake-opacity</div>
<div class="box shake-crazy">.shake-crazy</div>
<div class="box shake-chunk">.shake-chunk</div>
<p>Group</p>
<ul class="shake-trigger">
	<li class="box shake">.shake</li>
	<li class="box">none</li>
	<li class="box shake-hard">.shake-hard</li>
	<li class="box shake-slow">.shake-slow</li>
</ul>

要素にオンマウスすると、震えるアニメーションが実行されます。
.shake-triggerはアニメーションをまとめて実行するclassで、.shake-triggerを設定した要素にオンマウスすると、アニメーションのclassを持っている子孫要素がまとめてアニメーションされます。
CSShakeのデモページ1
　

特定のアニメーションのみ使用する場合、個別用に分割したファイルもあります。

<link rel="stylesheet" href="./csshake-slow.min.css">

CSShakeのデモページ2
以下のファイルが用意されています。

• csshake-crazy.min.css
• csshake-default.min.css
• csshake-hard.min.css
• csshake-horizontal.min.css
• csshake-little.min.css
• csshake-rotate.min.css
• csshake-slow.min.css
• csshake-vertical.min.css

オンマウスしないで常に動かしたい場合は.shake-constantを、オンマウスした時に停止したい場合は合わせて.shake-constant–hoverを指定します。
オンマウスでアニメーション実行後、マウスアウトした時にアニメーションを途中で停止させたい場合、.shake-freezeを指定します。

HTML

<div class="box shake shake-constant">.shake</div>
<div class="box shake shake-constant shake-constant--hover">.shake</div>
<div class="box shake-rotate shake-freeze">.shake-rotate</div>

CSShakeのデモページ3
　

【参考サイト】

• CSShake