CSS

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サイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)