2.IDEA

JP only

CSS Transitionsの珍事

CSS Transitionsで起こる珍事(バグとは限らない)です。テスト環境は以下です。

  • Chrome 39(OS X Marverics / Windows 7)
  • IE 11(Windows 7)
  • Firefox 34(OS X Marverics)
  • Safari 7(OS X Marverics)
  • Opera 26(OS X Marverics)
  • iOS 7(iPhone4S)
  • Android 2.3(IS05)
  • Android 4.1(Nexus S)

zoomしすぎる

zoomtransitionを指定すると、アニメーションの最中に指定した値を通り過ぎちゃいます。素直にtransfrom: scaleを使ったほうが良いみたいですね。以下、バグ詳細です。

  • というか、transition: all 1s ...じゃないと動かない(transition: zoom 1s ...って指定しても動かない)。
  • SafariとAndroid 2.3(IS05)とIE 11は思った通りのアニメーションをする
  • それ以外のブラウザでは、指定した値を通り過ぎちゃう
  • (Android 4.1(Nexus S)は独特な動きを見せる)

※Firefoxではzoomが効かないので動きません。

・zoomバグのデモ(zoom:0.8⇔zoom:2.0)

  • potato
  • Melon
  • MILK
OFF

opacityでスタック文脈が作られるタイミングが違う

THE・どうでもいい。

opacityに1未満を指定すると、スタック文脈なるものが作られます(詳しくはこちらの記事(要素の重なりについて本気出して考えてみた(z-indexとか何とかとか))を参照ください)。

opacityに何秒かのdelayがあるtransitionを指定すると、スタック文脈を形成するタイミングがブラウザによって違います。

  • FirefoxとIE: 実際に値が変化してから形成する
  • FirefoxとIE以外: 値が変化する前から形成する

・スタック文脈が作られるタイミングのデモ(opacity:1⇔opacity:0.8, transition-delay:1s)

OFF

background-imageにtransitionを使うとスライドショーっぽくなる

常識だったら申し訳ないですが、個人的にちょっとびっくりしたので。

  • FirefoxとIEとAndroid 2.3(IS05)ではアニメーションせずに切り替わる
  • それ以外のブラウザではスライドショーっぽくなる

・background-imageでのスライドショーのデモ(電線の写真⇔空の写真)

OFF

IEではSVGプロパティにtransitionが使えない

SMILにしろこれにしろ、IEのせいでSVGアニメーションの敷居が上がっています。個人的な愚痴です。

・transitionによるSVGプロパティ(fill)の変更のデモ(緑⇔赤)

OFF

z-indexのtransition

もはやバグとかブラウザ関係ないですが、「珍百景」にはふさわしいかなと思い。ホント、誰が使うんでしょうか・・・。

z-indexは整数の値しかとらないので、離散的に変化します。離散的なやつは他にもflexboxのorderがあります。

デモは、半透明の白いdivを10個重ねて、赤のdivを徐々に前に持ってきています。

・z-indexのtransitionのデモ(z-index:0⇔z-index:11)

OFF

Web Animation APIを使おう

以前、「CSS Transitions使おう」的な記事を書きましたが、今はむしろ時代遅れな気がしています。。

Smashing Magazineの記事この記事(web-animations-jsで策定中のAPIを先取りする)を読んでいると、Web Animation APIがどんどん魅力的に見えて、CSSのAnimationが霞んで見えてきます。