bakcground-sizeをtransition

background-sizeを制限してから敷き詰めるとTimelapseっぽくてカッコイイ。

背景画像をbackground-sizeプロパティーで縦横サイズを制限して敷き詰めるというのは昔id:hitode909がやってた。それをCSS Transitionsで元のサイズに戻したらどうなるかなーとやってみたらそこそこ面白かった。きっかけは96x96.netを見たことで、こっちはborder-imageプロパティーを組み合わせていて、widthプロパティーをtransitionしている。

Demo: background-size Transition

CSSは至って普通。background-positionプロパティーでセンタリングすると中央からブワッとなる。どちらかというと縦に並べた方がカッコイイ気がする。

.test {
	width: 640px; /* 背景画像の横幅 */
	height: 360px; /* 背景画像の縦幅 */
	background-image: url("http://example.com/img/bg.png");
	background-size: 100% 0.001%;
	background-repeat: repeat-y;
	background-position: center;
	transition-duration: 1s;
}

.test:hover {
	background-size: 100% 100%;
	transition-duration: 1s;
}

CSS Transitionsのサポートがマチマチなこと以外にもいろいろダメな所が多い。

小数の丸め(や%単位のpxへの変換における丸め)はそろそろ統一して欲しい。%ベースのグリッド・レイアウトの採用が進まない理由のひとつにこれがあるんじゃないかと思う。