2012-02-17

bakcground-sizeをtransition

背景画像を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のサポートがマチマチなこと以外にもいろいろダメな所が多い。

• Chromeではpx単位から%単位へのTransitionsができない
• 上記仕様を考慮してbackground-size: 100% 0.001%とかちょっと苦しい指定をすると、小数の丸め方がブラウザーにより違うため敷き詰めることができるものとそうでないものに分かれる
• Firefoxでは敷き詰めが想像以上におかしくなる(参考: background-sizeで1ピクセルにした時の各ブラウザの挙動の違い)
• Operaではtransition-propertyプロパティーでbackground-sizeプロパティーがサポートされていないのでアニメーションできない
• Internet Explorerはアンチエイリアスがきついような……など微妙にブラウザー間で違いがある
• 運が良いとブルースクリーンを召喚できる

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