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軸を操作しているので、値を大きくするとガクブル(ぶるぶる)レベルが大きくなります。
これで楽しいガクブルライフを送ってね!
コメント