CSSのmask-imageを使った表示切り替え演出 #CSS

ノベルゲームの場面転換の演出アニメーションを作ってるときに書いたやつ。

グラデーションでmaskをかけると画像の透明な部分が透明になる。
maskのポジションをずらすとサーッと消えていくような表現に。

デモ

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <style>
.wrapper{ position:relative; }
.bg1, .bg2{
    position: absolute;
    width:330px;
    height:100px;
    text-align: center;
    color:#fff;
    font-size:24px;
}
.bg1{ background-color: blue; }
.bg2{ background-color: red; }

.mask{
    -webkit-mask-size:106%;
    -webkit-mask-repeat:repeat-y;
}

.mask:hover{
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 30%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 30%);
    -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAABCAMAAACYPYflAAAA1VBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOZVIRAAAARnRSTlP2Q6sHbMgpi9j9FlvknH03uUseDeeTccxgTzDvwqWCsDvQAvdoIlfddhAKGb2X8j+H1DO1R4+hLSYT4XrsZVT7BRwIAfwA9oNAXgAAAFpJREFUeNrlwVUOggAAAFAaRimttHSHghLKgA3ufyT/uQLvAduRM8NrIsQ9mS6832Ef9XmxS7Dh7lNA3X4eIkcja1Z4K+XM24Cs1zXTUeVRE+FAi1+tAPZTcf8Ab04F4m5bVQAAAABJRU5ErkJggg==);

    -webkit-transition: -webkit-mask-position 1500ms ease;
    -webkit-mask-position:330px;
}
    </style>
</head>
<body>
<div class="wrapper">
    <div class="bg2">した</div>
    <div class="bg1 mask">うえ</div>
</div>
</body>
</html>

※

一部のAndroidでgradientのマスクをアニメーションさせたときに表示がおかしくなる。
参考 http://tenderfeel.xsrv.jp/css/1261/

デモはbase64エンコードしたグラデ画像を使用。
iPhoneならgradientでいけます