CSS3で文字をぶるぶる震わす！ / ブルブルメーカー : ういすぷの記録帳

ういすぷの気ままに綴るブログです。
フィギュア、グッズ、カプセルトイ（ガチャ）、食玩、付録、ぬいぐるみ、購入の際の梱包写真、PCなどのハードウェア、他にもオリジナルのWebサービスなどをご紹介しています。
フィギュアは、少し前の物を多く更新しています。懐かしいなとか感じてもらえると嬉しいです。

ご意見・ご感想は、記事下にあるフォームまたは、こちらの問い合せフォームからご投稿ください。写真などのご利用につきましては、サイトについてをご覧下さい。

CSS3で文字をぶるぶる震わす！ / ブルブルメーカー

2016.10.04

CSS3を使って、文字をぶるぶる震わすメモです。
こちらは、CSS3の@keyframesを使ったアニメーション処理になります。

以下のソースをコピペすることで、CLASS「buru2」の要素がぶるぶる震えます。
デモではDIV要素ですが、IMGのCLASS指定を行なえば、画像がぶるぶる震えます。強調するときにいかがですか。

□ HTMLソール

<div class="buru2">ブルブル</div>

□ CSSソース

.buru2 {

   display:inline-block;

   animation-name:buru2Setting2;

   animation-iteration-count:infinite;

   animation-duration:0.2s;

   margin:10px;

}

@keyframes buru2Setting2 {

   0% {transform:translate(0px, 0px) rotateZ(0deg)}

   25% {transform:translate(2px, 2px) rotateZ(3deg)}

   75% {transform:translate(0px, 3px) rotateZ(0deg)}

   50% {transform:translate(1px, 0px) rotateZ(-3deg)}

   100% {transform:translate(0px, 0px) rotateZ(0deg)}

}