HTML
CSS

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

More than 5 years have passed since last update.

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

グラデーションでmaskをかけると画像の透明な部分が透明になる。

maskのポジションをずらすとサーッと消えていくような表現に。


デモ

ここ (http://jsdo.it/nakajmg/enKV)


コード

<!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でいけます