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

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)}

}

□ もう少し派手に動かしたい。
「rotateZ」の値を変えると動きが派手になります。そこで、コピペしやすい物を作ってみました。スライダーを左右にずらすと、震える動きが確認出来るほか、ソースのコピペが出来るようになっています。

※ jQueryは利用していません。CSS3だけで実現しています。古いブラウザや一部IEでは動かない場合がございます。ご了承ください。



□ 関連記事
・background-image で比率を維持しながらレスポンシブ表示させる。
・Facebook のソーシャルカウント数を取得する
・大量のファイルを tar したい時のメモ
・さくらインターネットの.mailfilterを使って、件名が英数字、記号のスパムに対策をしました。
・パラメータ付URLを.htaccessでリダイレクトするメモ
・[Add-on Stylish] Web版Twitterのタイムラインに表示される画像、プロモーションの表示を設定するStylishのCSS （暫定）
・画像をクリックするとその場で拡大表示するようにしました。
・[Add-on Stylish] Twitterが更新されていたので、プロモ、お勧めフォロワ、画像などを表示させない様にする。 [2015/10/28 更新]