マスクテスト (Masking Test Script)

CSS Masks – How To Use Masking In CSS Nowの手法でマスキングしたらアニメーションではまった件に対処しようとしたサンプル
Images masked with tip from CSS Masks – How To Use Masking In CSS Now will fail to animate on FireFox and IE9... and this is a example script of struggling to animate masked images.

WebKit(Chrome/Safari)では、どの例でも-webkit-mask-imageを用いる
IE6-8ではSVGをIE9-10ではprogid:DXImageTransform.Microsoft.Chromaを用いる
Using -webkit-mask-image for WebKit(Chrome Safari) in all examples
Using SVG for IE6-8, and Using progid:DXImageTransform.Microsoft.Chroma For IE9-IE10.

Ex1

FireFoxでclip-pathを用いる（OSX FireFoxでアニメーションがおかしい、IE9もだめ）

Using clip-path for FireFox (Animation fails on OSX Firefox and IE9)

Click to Fade In/Out Toggle Obstacle

Ex2

FireFoxでもSVGを用いる（OSX FireFoxでもアニメーションが大丈夫、IE9ではだめ）

Using SVG for FireFox (Animation suceeds on OSX Firefox, Still not works on IE9)

Click to Fade In/Out Toggle Obstacle

Ex3

IEでは独自でfadeIn/fadeOut （背景が黒ければまぁOKなんだけど...）

Tryed to fix animation on Fxxking IE9... Suceeded If background color is black.

Click to Fade In/Out Toggle Obstacle

Photo by (c)Tomo.Yun.
このサンプルで使われている画像はゆんフリー写真素材集から拝借しました。
All photos on this example are borrowed from ゆんフリー車新素材集.