マテリアルデザイン、海外のウェブサイトでなんだか妙に流行ってますね。

という訳で、マテリアルデザインでよく見かけるアニメーション付きボタンを作ってみました。


※赤い丸のエフェクトはキャプチャソフトによる物です。

実際にブラウザで動作する物はこちら(http://jsdo.it/Evolutor_web/oVYI)から


このボタン、CSS3のtransitionプロパティによって行っています。
いわゆる「CSSアニメーション」って奴ですね。

こちらのCSSアニメーションですが、ブラウザごとに実装が微妙に異なり、見え方が違ってしまいます。

かなりハッキリと違いが分かる部分としてアンチエイリアスの掛かり具合が挙げられると思います。


Google Chrome 43.0

自然なアンチエイリアスが掛かり、アニメーションもスムーズです。
01_chrome

FireFox 39.0

アンチエイリアスがありません。
アニメーションはスムーズですが、アンチエイリアスが掛かっていない為、あまり綺麗には見えません。
02_firefox

Internet Explorer 11

IEではアンチエイリアスが掛かっているというより、変形箇所が全てぼやけます。
例えば、rotateで少しでも傾けたらぼやけてしまいます。

残念ながらWindows 10の標準ブラウザであるMicrosoft Edgeでもぼやけてしまうようです(InsiderPreview版にて確認)
03_ie


CSS3に関わる要素は未だに実装が各ベンダー毎で異なったりしており、仕様が安定していないので制作する際には気をつける必要がありますね。

最近のブラウザでは基本的に大抵”動く”ようにはなっていますが、上記のような見え方の違いがあったり、実装の仕様が違うが為にアニメーションの付き方が違う(3Dで回転させる時にX,Y,Zの軸が違った動きをする事がある)という事も起こり得ます。