cssのmask-imageを使ったスライド
前回、cssで色々な形で画像をマスクしてみましたが、今回はcssアニメーションを追加する事でさらに自由度の高い表現が出来るようになります。
mask-imageはベンダープレフィックスが必要
chromeにベンダープレフィックスが必要です。
caniuse.com
mask-image: マスクとして使用される画像 を指定します。
mask-repeat:マスク画像の位置を設定します。
mask-size:マスク画像の大きさを設定します。
mask-position: マスク画像の位置を設定します。
この中のmask-positionをanimationで右下から左上に動かしていくアニメーションです。
