表題だけだとよくわからないかもですが

こんな感じにページ内の要素がグリングリン回り始めます。

詳細は続きから

対応ブラウザ

Chrome3以上か、Safari4以上

使用方法

1. ページグルグル【kzms2】←をお気に入り登録（ブックマーク）します。
2. グルグルさせたいページでクリックします

以上です。
動きを見るだけならページグルグル【kzms2】をクリックするだけでこのページがグリングリンし始めます。

仕組みの説明

また今度アニメーションの要素については説明しますが、概要っぽく説明しておきます。

css3について

.kzms2{
/*動き方の指定*/
-webkit-animation-timing-function:cubic-bezier;
/*アニメーションの起点を決める*/
-webkit-transform-origin:50% 50%;
/*アニメーションの回数を設定*/
-webkit-animation-iteration-count:1;
/*kzms2rotateというアニメーションの動作をさせる*/
-webkit-animation-name:kzms2rotate;
}
/*kzms2rotateアニメーションの設定
%ごとに動きを決める*/
@-webkit-keyframes kzms2rotate{
0%{
}
12.5%{
/*rotateは回転、scaleは拡大・縮小*/
-webkit-transform:rotate(45deg) scale(0.5);
}
25%{
-webkit-transform:rotate(90deg) scale(1);
}
37.5%{
-webkit-transform:rotate(135deg) scale(0.5);
}
50%{
-webkit-transform:rotate(180deg) scale(1);
}
62.5%{
-webkit-transform:rotate(225deg) scale(0.5);
}
75%{
-webkit-transform:rotate(270deg) scale(1);
}
87.5%{
-webkit-transform:rotate(315deg) scale(0.5);
}
100%{
-webkit-transform:rotate(360deg) scale(1);
}
}

Javascriptについて

Javascriptは言うほど得意ではないのであまり載せたくないのですが。。。
ブックマークレットをクリックすると以下のJavascriptを読み込みます。
流れとしては

1. cssファイルをヘッダーに書き出し
2. body内の全要素を特定
3. body内の全要素それぞれにclass=”kzms2″を追加
4. ランダムな数値でアニメーションの感覚・時間を設定

と言った様な処理をしています。

var kzms2 = {
init:function(){
kzms2.getCSS('http://kzms2.com/lab/css3/bml/dance.css');
kzms2.dance();
},
getCSS:function(url){
var link = document.createElement('link');
with(link){
href = url;
type = 'text/css';
rel = 'stylesheet';
}
var head = document.getElementsByTagName('head');
head.item(0).appendChild(link);
},
dance:function(){
var i=0;
var el = document.getElementsByTagName('body')[0].getElementsByTagName('*');
for(i;i var rand = 500*parseInt(Math.random()*50);
var rand2 = 1500*parseInt(Math.random()*50);
el[i].className = el[i].className+' kzms2';
el[i].style.webkitAnimationDuration = rand+'ms';
el[i].style.webkitAnimationDelay = rand2+'ms';
}
}
}
kzms2.init();

またまたネタっぽいですね＞＜
css3の利点に関しては時間を多く取れる時に書きたいと思います！

Inspect Elementというサイトで

お勧めのブックマークレット10選というものがありました。
その中でも気になった3個をちょちょいと載せます。

ちなみにブックマークレットって何？

使ったことがない方向けに説明をすると、指定されたリンクをお気に入りに登録して、クリックすることでそのページに任意の効果を示すことができます。
またそのページ内にそのリンクがある場合は、クリックするだけで起動することが可能です。

百聞は一見にしかず。このリンクをお気に入りに登録、もしくはクリックしてください。

このページのURLがアラートで表示されたと思います。
クリックするだけだと何も恩恵がありませんが、お気に入りに登録して他のページでそのお気に入りをクリックするとそこのページのURLがアラートで表示されます。

といったようにお気に入りにJavascriptを仕込んで、何か動かしてしまおうというのがブックマークレットです。

詳細は続きから

では本題の個人的に気に入ったブックマークレットを下で紹介します。
元の記事とは順番が違いますが、個人的に気に入った順番で説明しています。

Design

1. Grid（グリッド表示）
2. Rule（ルーラー表示）
3. Unit（2点距離表示）
4. Crosshair（十字線表示）

の4機能が使えるブックマークレットです。
コーディング時の細かなデザイン調整を行うときに使用するとよいのではないでしょうか。
このページで起動してみる。

Firebug Lite

FirefoxのアドオンでおなじみのFirebugのLite版（そのままの説明ですね）
アドオンほどの機能はないですが、IEやアドオンがない環境で軽く見る分にはいいかもしれません。

このページで起動してみる。

XRAY

ページ内の各要素をクリックして、その部分のボックスモデルを視覚的に確認できる。
offsetやmargin、border、padding、widthなどなど…
クリックした場所の情報が数値や見た目で見ることが出来ます。

このページで起動してみる。

MRI

これは、指定したセレクタに該当するHTMLがページ上に何個あるか見ることが出来る物です。
使われていないCSSなどを見つけることが出来たりなどするのではないでしょうか。
ブックマークレットを起動した後の使い方に関しては以下の2通りかと思います。

1. 調査したい要素をクリックして、Suggest Selectorsの下に出てきたセレクタを選択する
2. 出てきたウィンドウのテキストボックスにセレクタを入力（h2　など）する

このページで起動してみる。

上以外の物も気になったら

以下のエントリを参照してみてください。
10 Useful Bookmarklets for Web Designers and Developers