© 2016 電脳 Papa 1
1332 Masking の効果
-webkit-mask-box-image プロパティをアニメーションに利用してみましょう。Masking は
Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）のみで動かすことができます。
2013 年 12 月現在、
W3C で Masking の仕様が Working Draft となっています。
近い将来 webkit
系以外のブラウザでも Masking が使えるようになるでしょう。
サンプルＣＳＳのスクリプトには mask-box-image と-webkit-mask-box-image を指定してあ
りますが、現在のところ機能するのは-webkit-mask-box-image の方だけです。
３つのマスクイメージを使います。１つ目は MASK という文字の下に楕円形のマスクイメー
ジで、その文字と楕円形の中に複数画像のスライドを表示します。２つ目は星形のマスク
イメージで、星形の中に画像を表示して回転しながら斜めに移動させます。３つ目は円形
のグラデーションでマスクイメージを作り、その中に画像を表示して縦横に移動させます。
【MaskAnimation の説明】
〔HTML の記述（MaskAnimation.html）
〕
サンプルＣＳＳ
© 2016 電脳 Papa 2
１つ目は MASK という文字の下に楕円形のマスクイメージで、その文字と楕円形の中に複数
画 像 の ス ラ イ ド を 表 示 す る の で 、 id 属 性 slide の div 要 素 の 中 に 画 像 を ５ つ
（images/DSC00203L.jpg、images/DSC00027L.jpg、images/DSC00092L.jpg、images/DSC000
95L.jpg、images/DSC00131L.jpg）指定します。２つ目は星形のマスクイメージで、星形の
中に画像を表示するので、id 属性 star の div 要素の中に画像 images/DSC00007L.jp を指定
します。３つ目は円形のグラデーションでマスクイメージを作り、その中に画像を表示す
るので、id 属性 spot の img 要素で images/DSC00149L.jp を指定します。
〔CSS の記述（MaskAnimation.css）
〕
#stage ステージのスタイルを指定します。width: 700px; height: 550px;、背景に黒色を
指定します。
#stage { width: 700px; height: 550px; background-color: #000000; border: solid 1px #000000; position: relative; } <!DOCTYPE html> <html> <head> <title>MaskAnimation</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="MaskAnimation.css"> </head> <body> <p>■ＣＳＳ３で画像をマスクし、アニメーションさせる。</p> <div id="stage"> <div id="slide"> <img src="images/DSC00203L.jpg"> <img src="images/DSC00027L.jpg"> <img src="images/DSC00092L.jpg"> <img src="images/DSC00095L.jpg"> <img src="images/DSC00131L.jpg"> </div>
<div id="star"><img src="images/DSC00007L.jpg"></div> <img id="spot" src="images/DSC00149L.jpg">
</div> </body> </html>
© 2016 電脳 Papa 3
●MASK という文字とその下の楕円形の中に複数画像のスライドを表示する。
（表示する画像） （マスクイメージ画像） （マスク後表示画像）
スライド画像の位置の起点を指定します。position は absolute、位置は top: 20px; left:
20px;（#stage ボックスの左上端を起点とした位置）で指定します。
４つの画像の共通のスタイルを指定します。width: 400px; height: 300px;で指定します。
-webkit-mask-box-image: url(images/mask1.png); で 、 マ ス ク イ メ ー ジ 画 像 と し て
images/mask1.png を指定します。opacity: 0.0;と指定して、
見えないようにしておきます。
１つ目の画像はアニメーション名を slide1Anime、実行時間を 30s、イージングを linear、
開始待ち時間を 0s、繰り返しを infinite、実行方向は normal で指定します。
２つ目の画像はアニメーション名を slide2Anime で指定します。
#slide { top: 20px; left: 20px; position: absolute; } #slide img { top: 0px; left: 0px; width: 400px; height: 300px; position: absolute; mask-box-image: url(images/mask1.png); -webkit-mask-box-image: url(images/mask1.png); opacity: 0.0; } #slide img:nth-child(1) {animation: slide1Anime 30s linear 0s infinite normal;
-webkit-animation: slide1Anime 30s linear 0s infinite normal; }
© 2016 電脳 Papa 4
３つ目の画像はアニメーション名を slide3Anime で指定します。
４つ目の画像はアニメーション名を slide4Anime で指定します。
５つ目の画像はアニメーション名を slide5Anime で指定します。
アニメーション名 slide1Anime から slide5Anime に対応するタイムライン（@keyframes）
を指定します。タイムラインを５分割（画像の数）し、slide1Anime は５分割の１番目の時
間で opacity: 1.0;にしてグラデーションが見えるようにします。次に slide2Anime は５分
割の２番目の時間で opacity: 1.0;にしてグラデーションが見えるようにします。同じよう
に slide3Anime から slide5Anime も、５分割の３番目の時間から５番目の時間で opacity:
1.0;にして画像が見えるようにします。
slide1Anime と slide5Anime は他のタイムラインと少し違うところがあります。grad1Anime
は、タイムラインの５番目の時間にも opacity: 1.0;にして、徐々に見えるようにします。
slide5Anime は、タイムラインの５番目の時間を opacity: 0.0;にして、徐々に見えなくな
るようにします。これで画像が徐々に切り替わって永久に繰り返すように見えます。
#slide img:nth-child(2) {
animation: slide2Anime 30s linear 0s infinite normal;
-webkit-animation: slide2Anime 30s linear 0s infinite normal; }
#slide img:nth-child(3) {
animation: slide3Anime 30s linear 0s infinite normal;
-webkit-animation: slide3Anime 30s linear 0s infinite normal; }
#slide img:nth-child(4) {
animation: slide4Anime 30s linear 0s infinite normal;
-webkit-animation: slide4Anime 30s linear 0s infinite normal; }
#slide img:nth-child(5) {
animation: slide5Anime 30s linear 0s infinite normal;
-webkit-animation: slide5Anime 30s linear 0s infinite normal; }
© 2016 電脳 Papa 5 /* slide1Anime **************************************/ @keyframes slide1Anime { from { opacity: 1.0; } 15% { opacity: 1.0; } 20% { opacity: 0.0; } 95% { opacity: 0.0; } to { opacity: 1.0; } } @-webkit-keyframes slide1Anime { from { opacity: 1.0; } 15% { opacity: 1.0; } 20% { opacity: 0.0; } 95% { opacity: 0.0; } to { opacity: 1.0; } } /* slide2Anime **************************************/ @keyframes slide2Anime { from { opacity: 0.0; } 15% { opacity: 0.0; } 20% { opacity: 1.0; } 35% { opacity: 1.0; } 40% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes slide2Anime { from { opacity: 0.0; } 15% { opacity: 0.0; } 20% { opacity: 1.0; } 35% { opacity: 1.0; } 40% { opacity: 0.0; } to { opacity: 0.0; } } /* slide3Anime **************************************/ @keyframes slide3Anime { from { opacity: 0.0; } 35% { opacity: 0.0; } 40% { opacity: 1.0; } 55% { opacity: 1.0; } 60% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes slide3Anime { from { opacity: 0.0; } 35% { opacity: 0.0; } 40% { opacity: 1.0; } 55% { opacity: 1.0; } 60% { opacity: 0.0; } to { opacity: 0.0; } } /* slide4Anime **************************************/ @keyframes slide4Anime {
© 2016 電脳 Papa 6
●星形の中に画像を表示して回転移動させる。
（表示する画像） （マスクイメージ画像） （マスク後表示画像）
画像の位置の起点となる#star ボックスを指定します。#star ボックスは５秒で移動するよ
うにアニメーションを指定します。position は absolute、位置は top: 320px; left: 10px;
（#stage ボックスの左上端を起点とした位置）
、width: 250px; height: 225px;で指定しま
from { opacity: 0.0; } 55% { opacity: 0.0; } 60% { opacity: 1.0; } 75% { opacity: 1.0; } 80% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes slide4Anime { from { opacity: 0.0; } 55% { opacity: 0.0; } 60% { opacity: 1.0; } 75% { opacity: 1.0; } 80% { opacity: 0.0; } to { opacity: 0.0; } } /* slide5Anime **************************************/ @keyframes slide5Anime { from { opacity: 0.0; } 75% { opacity: 0.0; } 80% { opacity: 1.0; } 95% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes slide5Anime { from { opacity: 0.0; } 75% { opacity: 0.0; } 80% { opacity: 1.0; } 95% { opacity: 1.0; } to { opacity: 0.0; } }
＋
＝
© 2016 電脳 Papa 7
す。
アニメーション名を star1Anime、実行時間を 5s、イージングを ease-in-out、開始待ち時
間を 0s、繰り返しを infinite、実行方向は alternate で指定します。
アニメーション名 star1Anime に対応するタイムライン（@keyframes）を指定します。top:
320px; left: 10px;から、-webkit-transform: translate(420px, -300px);で、X 方向に
420px、Y 方向に-300px 移動させます。
画像を指定します。width: 250px; height: 225px;で指定します。-webkit-mask-box-image:
url(images/StarMask2.png);で、マスクイメージ画像として images/StarMask2.png を指定
します。
アニメーション名を star2Anime、実行時間を 2s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は normal で指定します。
#star { top: 320px; left: 10px; width: 250px; height: 225px; position: absolute;animation: star1Anime 5s ease-in-out 0s infinite alternate;
-webkit-animation: star1Anime 5s ease-in-out 0s infinite alternate; } #star img { top: 0px; left: 0px; width: 250px; height: 225px; position: absolute; mask-box-image: url(images/StarMask2.png); -webkit-mask-box-image: url(images/StarMask2.png);
animation: star2Anime 2s linear 0s infinite normal;
-webkit-animation: star2Anime 2s linear 0s infinite normal; } @keyframes star1Anime { from { } to { transform: translate(420px, -300px); } } @-webkit-keyframes star1Anime { from { } to { -webkit-transform: translate(420px, -300px); } }
© 2016 電脳 Papa 8
アニメーション名 star2Anime に対応するタイムライン（@keyframes）を指定します。
-webkit-transform: rotateY(360deg);で Y 軸の正の方向から見て時計方向に 360 度回転（１
回転）させます。
●円形のグラデーションの中に画像を表示して移動させる。
（表示する画像） （マスクイメージ） （マスク後表示画像）
画像#spot を指定します。top: 330px; left: 450px;（#stage ボックスの左上端を起点と
し た 位 置 ）、 width: 250px; height: 225px; で 指 定 し ま す 。 -webkit-mask-image:
-webkit-radial-gradient(50% 50%, farthest-side, rgba(0,0,0,1) 40%, rgba(0,0,0,0)
90%);で、マスクイメージとして、#spot ボックスの中心から半径 40%の黒色の円形で半径
90%まで徐々に黒色が薄くなるグラデーションを指定します。
アニメーション名を spotAnime、実行時間を 20s、イージングを ease-in-out、開始待ち時
間を 0s、繰り返しを infinite、実行方向は normal で指定します。
@keyframes star2Anime { from { } to { transform: rotateY(360deg); } } @-webkit-keyframes star2Anime { from { } to { -webkit-transform: rotateY(360deg); } } #spot { top: 330px; left: 450px; width: 250px; height: 225px; position: absolute;mask-image: radial-gradient(farthest-side at 50% 50%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 90%);
-webkit-mask-image: -webkit-radial-gradient(50% 50%, farthest-side,
rgba(0,0,0,1) 40%, rgba(0,0,0,0) 90%);
© 2016 電脳 Papa 9
アニメーション名 spotAnime に対応するタイムライン（@keyframes）を指定します。top:
330px; left: 450px;から、25%で-webkit-transform: translateX(-450px);で、X 方向に
-450px 移動させ、50%で元の位置に戻し、75%で-webkit-transform: translateY(-330px);
で、Y 方向に-330px 移動させ、100%で元の位置に戻します。
@keyframes spotAnime { from { } 25% { transform: translateX(-450px); } 50% { transform: translateX(0px); } 75% { transform: translateY(-330px); } to { transform: translateY(0px); } } @-webkit-keyframes spotAnime { from { } 25% { -webkit-transform: translateX(-450px); } 50% { -webkit-transform: translateX(0px); } 75% { -webkit-transform: translateY(-330px); } to { -webkit-transform: translateY(0px); } }animation: spotAnime 20s ease-in-out 0s infinite normal;
-webkit-animation: spotAnime 20s ease-in-out 0s infinite normal; }
