【CSShake】CSSでぶるぶるとした動きを簡単に表現する方法

HTML・JavaScript..

2020.12.29

こんにちは、ハル@haru_elpisです。

CSSでぶるぶるとした動きを表現したい時に使える「CSShake」の紹介です。

CSShakeとは

「CSShake」はクラスを指定した要素をぶるぶると振える効果を出すことができます。

ダウンロード

CSShake

Some CSS classes to move your DOM! Easy-to-use classes that will add different kind of shake to each part of your site.

ダウンロードした「csshake.min.css」ファイルをcssフォルダなど任意の場所へ移動しておきましょう。

head

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

HTML

<div class="shake">ベーシック</div>
<div class="shake-hard">ハード</div>
<div class="shake-slow">スロー</div>
<div class="shake-little">リトル</div>
<div class="shake-horizontal">横揺れ</div>
<div class="shake-vertical">縦揺れ</div>
<div class="shake-rotate">斜め</div>
<div class="shake-opacity">透過</div>
<div class="shake-crazy">クレイジー</div>
<div class="shake-chunk">チャンク</div>

これだけでCSSを使う事ができるようになるのでとても便利です。目立たせたい所に使用してみてはいかがでしょうか。

おわりっ