視差、マスク、トランジション（oh my！）クリッピングなしIEのため

Question

私は、私がこれを手伝ってくれる何かを見つけることができないため、私は独特の状況だと思っています。マスクされた要素の中に視差効果を追加しようとしています。要素が... "視差がある"ことができる前に...マスクされたコンテナ内で、ビューにスライドさせる必要があります。

-webkit-mask-image: url(path/to/image.png); 

Firefoxののために、私は何の問題を持っていない私が使用できるよう：

<svg><defs><clipPath id="clip-elem"><polygon points="0 0, 891 300, 0 944"></polygon></clipPath></defs></svg> 

をしてSVGを適用

クローム では、私が使用できるよう何の問題を持っていませんコンテナにクリップすると、大きな要素のマスクが作成されます。

clip-path:url("#clip-elem"); 

IE 10および11のサポートでは、マスクエフェクトを作成するための唯一の可能な解決策はクリッピングを使用することです。これはマスクの錯覚を与えますが、実際には要素をクリップします。上または下にスライドし始めると、マスクされるべき領域を越えて移動するときに、カットされていることがすぐにわかります。

IEで、クリッピングを使わずに上下にアニメーション（translateY）する要素でマスキングする実例（または洞察）を誰でも提供できますか？

Answer 1

IEでは、CSSのマスキングや任意の形状へのクリッピングはサポートされていません。 HTML要素をマスクする必要がある場合は、要素の前に透明な穴があいている背景の色をイメージの前に置くことが最善の方法です。

また、三角形ではなく長方形のクリップ領域を使用してIEで生活することもできます。

最後に、すべてをSVGに変換することです。クリッピングとマスキングはSVG内で動作します。