CSS で動画素材をマスクとして使う方法

CSS で動画素材をマスクとして使う方法を紹介します。
例えば、煙から写真が出てくる様な表現を行いたい場合に便利な方法です。

まずモノクロの動画素材を作成。1秒間60Fとした場合は、60コマの素材を作成して、1コマごとの画像を縦か横に一枚に繋げた画像を作成します。

画像を作成する場合、例えば After Effects で、連番静止画出力を行い、Photoshop で一枚に編集するのが一般的な方法です。

次に、CSSの指定で繋げたマスク画像を CSS の mask-image で読み込みます。このままではただ読み込んだだけなので、表示範囲を一コマ分のサイズに指定して、繋げた画像がこの範囲でアニメーションする様に設定します。

その場合 CSS の　animation を指定して、動作の形式を steps にすることで、パラパラアニメの様にします。
あとは、アニメーションと表示範囲を調整して完成です。