2012-04-20

transitionとmax-widthプロパティー

CSS Transitionsを使ってwidthプロパティーをアニメーションさせる時にmax-widthプロパティーがあるとどうアニメーションされるのかというのが気になったので調べてみたら、Chrome 18と20、Opera 11、12でアニメーションがおかしくなるバグにぶち当たった。Internet Explorer 10とFirefox 11(及び13)では大丈夫そう。

Demo: max-width and transition

WebKit系では一旦幅が0になってからアニメーションが始まり、10秒でmax-widthプロパティーの値である400pxで止まる。逆方向のアニメーションもつけた場合、max-widthプロパティーの値を無視して600pxから100pxへ10秒かけてアニメーションするようになるが、400pxから600pxの間のアニメーションは描画されない。Opera系ではとにかくアニメーションさせようとした要素が消える。

WebKit系では、デモのような一方向のアニメーションならtransitionとmax-widthプロパティーを同時に指定しなければ回避できる。

.test {
  width: 100px;
  max-width: 400px;
}

.test:hover {
  width: 600px;
  transition: all 10s linear;
}

両方向でアニメーションさせる場合は……あとで考えるけど無理そう。

調べたかったmax-widthプロパティーが考慮されたアニメーションなるのかというのの答えは、一応なるということで良さそう。