私は使用することにしました：
* {
-webkit-transform: translate3d(0px, 0px, 0px);
}
ハードウェアアクセラレーションを強制するためか、アニメーションがはるかにスムーズになることを確認したとき。ただし、アニメーションのある時点で、z-indexテキストの前にシェイプを配置するために、そのテキストにいくつかの調整を加える必要もあります。mask重要なのは、私の（灰色の）図形は、テキストの後ろにある別の図形（下の例では緑色の図形）と同期して移動する必要があるということです。
より視覚的にするために、簡単な例を作成しました。Firefoxではうまく機能しますが、ChromeとSafariでは機能しません。translate3dを削除すれば機能しますが、実際のプロジェクトではスライドとスムーズなアニメーションがたくさん必要になるため、削除するとユーザーエクスペリエンスが低下します。
translate3Dがないと、ピアDOMノード（テキスト）を別のピア（ハンドラー）とその子の1つ（マスク）の間に配置できますが、テキストにもハンドラーにも明示的なzインデックスがないためです。この場合、zインデックスが付けられていないすべてのブロックが最初にレンダリングされ、次にマスクが最後にレンダリングされます（子要素であっても）。これは意味がありますか？さて、それはブラウザがどのように機能するかです。
ただし、translate3dを「*」に追加すると、各要素に「スタッキングコンテキスト」が追加されたため、translate3dなしで「機能するようになった」ものは機能しなくなりました。ちなみに、例の各要素に明示的なz-indexを追加すると、マスクも「台無し」になります。繰り返しになりますが、別のピアとその子の1つの間にピアDOMノードを配置することはできません。これは、子が叔父/叔母ノードを基準にした位置にある限り、親のz-indexを継承するためです。
私のアドバイスは、z軸で相互に相対的に配置したいものがすべて、DOMピアになるように、自分のものをアンネストすることです。これには、すべての要素の絶対位置を手動で計算する必要があり、オーバーフロークリッピングの利点が失われますが、機能します。正と負のz値を使用して3D変換を実行することでこれを複製することもできますが、これもピア要素間でのみです。
（z-indexを！importantとしてマークすると、カスケードが元に戻され、要素がカスケードのスタック順序の一番上に配置されます。これはハックです。）
とった！CSSクリッププロパティを使用して、テキストをマスクし、他のオブジェクトの位置に基づいてrect値を更新できます。ここにいくつかの情報がありますw3schools.com/cssref/pr_pos_clip.asp。このリンクは、http： //webdesignerwall.com/tutorials/5-simple-but-useful-css-propertiesでもかなり洞察に満ちています。
そして最後に、http：//iuqo.comで行われた私のプロジェクトがあります。背景をドラッグすると、テキストが（垂直方向にうまく）カットされているのがわかります。まさに私が欲しかった通り。