CSSだけでブルブル震わせる

2016-08-19

CSS だけで文字や画像をブルブル震わせてみます。

複雑な感じにブルブル震わせることも CSS を細かく記述すれば出来るのですが、なるべく短いシンプルな記述でブルブル震えるよう見える感じにしてみました。

buruburu

CSS だけでブルブル

CSS の animation を使って永久アニメーションをさせます。

HTML

<span class="buruburu">ブルブル</span>

class 名が「buruburu」の要素を作ります。

CSS

.buruburu {
    display: inline-block;
    animation: hurueru .1s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

赤字の inline-block に関しては inline でなければ OK で、display: block などでも構いません。transform は display: inline の要素には効かないのでこのような形をとっています。

keyframes アニメーションを使い要素をブルブル震わせています。translate で移動、 rotate で回転です。

デモ

文字は当然OKで、

ブルブル

画像もいけます。

プロフィール画像

画像を震わせてあげたいときは

<img class="buruburu" src="・・・">

と、画像自体に class 名を付けてあげれば大丈夫です。

hover 時にブルブル震わせる

マウスカーソルを乗せたら震えるようにも出来ます。class 名を buruburu-hover としておきます。

HTML

<span class="buruburu-hover">マウス乗せるとブルブル</span>

CSS

.buruburu-hover:hover {
    display: inline-block;
    animation: hurueru .1s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

デモ

文字部分に乗せると震えます。

マウス乗せるとブルブル

画像でも同じく可能です。

プロフィール画像

まとめ

CSS を調整してあげれば色々変更が効きます。ずっと震えているのはともかく、マウスカーソルを乗せたら震えるというのは使いどころがあるかもしれません。

一昔前ならば JavaScript を使って実装していたエフェクトですが、今なら CSS だけでもそれなりにブルブル震えて見えます。