アニメでマトリックス(注:映画やビデオの話しではないw)

transform:matrix()をCSS Animationで変形させるとブラウザにより挙動がバラバラ

CSS3にtransformという要素を変形させるプロパティがあって、変形のさせ方として変換行列で指定するmatrix()関数というのがある。

matrix(行列)

transform:  matrix(a, c, b, d, tx, ty)

/* a, b, c, d は変換行列を構成します 
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   tx, ty は移動量です(translate values)  */

うちのサイトのタイトルで利用しているような左右反転文字の場合は transform: matrix(-1,0,0,1,0,0); となる。

で、CSS3のanimationを利用して、普通の文字から回転して反転文字に、という処理を加えようとしたところ、ブラウザにより挙動がてんでバラバラだったw

こちらがそのテストケース

このうち、@keyframesのソースを単純化させた例としてはこんな感じ。


@keyframes flipText {
	from {
		transform: matrix(1,0,0,1,0,0);
	}
	to {
		transform: matrix(-1,0,0,1,0,0);
	}
}

さて、その結果だが、まずFirefoxは、こちらの期待通りに、文字(要素)の真ん中の縦軸(Y軸)を中心に半回転しながら反転文字になる。

一方、Chromeの場合は、回転するのではなく、縮んで伸びて、という妙な動きになる。 もう少し具体的には、文字の中心点に向かって縮んでいき、一旦消えて、今度は反転文字になって拡大してくる。 バグっぽいけど、これがChromeの仕様、とも言えちゃいそうでよくわからんw

ただ、Chromeでも、from{}to{}の間に、途中の状態を逐一記述すれば、一応Firefoxと同じ動きになる。


@-webkit-keyframes flipText {
	/* -webkit-animation-timing-function: ease-in-out; の場合 */
	from {
		-webkit-transform: matrix(1,0,0,1,0,0);
	}
	10% {
		-webkit-transform: matrix(0.96,0,0,1,0,0);
	}
	20% {
		-webkit-transform: matrix(0.84,0,0,1,0,0);
	}
	30% {
		-webkit-transform: matrix(0.63,0,0,1,0,0);
	}
	40% {
		-webkit-transform: matrix(0.34,0,0,1,0,0);
	}
	50% {
		-webkit-transform: matrix(0,0,0,1,0,0);
	}
	60% {
		-webkit-transform: matrix(-0.34,0,0,1,0,0);
	}
	70% {
		-webkit-transform: matrix(-0.63,0,0,1,0,0);
	}
	80 {
		-webkit-transform: matrix(-0.84,0,0,1,0,0);
	}
	90% {
		-webkit-transform: matrix(-0.96,0,0,1,0,0);
	}
	to {
		-webkit-transform: matrix(-1,0,0,1,0,0);
	}
}

で、IE11。

こちらは文字の真ん中を中心として時計回りに半回転して、上下がひっくり返った文字になってしまう。 animationを適用させずにmatrix(-1,0,0,1,0,0)を適用させた場合はちゃんと左右の反転文字になるので、これは明らかにバグだろう。 ということで、IE11の正式版が登場して今更だが、MS Connectにバグ登録してみた。 transform: matrix() with CSS Animation will flip (transform) wrong way in IE11 | Microsoft Connect
でも、説明が不十分で何度も訂正する羽目にorz

さらに、IE11では、background-sizeがanimationできないというバグも見つけたが、これはすでに登録されていた。 -ms-transition-property: background-size; does not work properly | Microsoft Connect
We will take your feedback as a request to consider it for a future releaseだそうだけど…

ちなみに、Safariは持ってないので未確認。 Androidの標準ブラウザの動きはChromeと一緒だったので、きっとSafariも同様だと予想w

追記:回避策

ふと思いついて、matrix()の代わりにscaleX()だけを指定するようにしてみたら、ChromeもIE11もFirefoxと同様に、こちらの期待通りに半回転するようになった。(もっとも、IE11のbackground-sizeの問題は残ったままだけど…) テストケース、その2

同じ内容を指定しているのに、値の渡し方によって動作が異なるのは腑に落ちないところもあるが、なるべく単純な値を渡した方がバグるリスクが少なくなるのは、まぁ当たり前っちゃー当たり前の話ではあるなぁ…

だったらもっと早く気づけよ>自分orz

"アニメでマトリックス(注:映画やビデオの話しではないw)"へのTwitter上でのコメントやRT

5件のツイートがあります。

ツイート 1

ツイート 2

ツイート 3

ツイート 4

ツイート 5