CSSだけでガクブル(ぶるぶる)させてみた

CSSだけでガクブルさせてみました。
テキスト・画像問わずCSSだけでガクブル(ブルブルと振るわせる)アニメーションを作成しました。

(((゜Д゜;)))

こういうことができちゃう!

CSSだけでガクブル(ぶるぶる)させる

では早速コードを書いていきます。
今回「gakuburu」というclassを付けていますが、任意で変更してください。

/* このclassを震わせる要素に付ける */
.gakuburu {
    display: inline-block;
    animation: gakuburu .1s  infinite;
}

@keyframes gakuburu {
    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)}
}

「translate」で横の振れ幅、「rotateZ」でZ軸を操作しているので、値を大きくするとガクブル(ぶるぶる)レベルが大きくなります。

これで楽しいガクブルライフを送ってね!

コメント

タイトルとURLをコピーしました