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軸を操作しているので、値を大きくするとガクブル（ぶるぶる）レベルが大きくなります。

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

ABOUT ME

シラツキ

Web制作会社で働くフロントエンドエンジニア（コーダー）。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中！ お気軽にご相談ください。