1332 Masking の効果 -webkit-mask-box-image プロパティをアニメーションに利用してみましょう Masking は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Masking の仕様が Working Draft となっています 近い将来 webkit 系以外のブラウザでも Masking が使えるようになるでしょう サンプルCSSのスクリプトには mask-box-image と-webkit-mask-box-image を指定してありますが 現在のところ機能するのは-webkit-mask-box-image の方だけです サンプル CSS 3つのマスクイメージを使います 1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示します 2つ目は星形のマスクイメージで 星形の中に画像を表示して回転しながら斜めに移動させます 3つ目は円形のグラデーションでマスクイメージを作り その中に画像を表示して縦横に移動させます MaskAnimation の説明 HTML の記述 (MaskAnimation.html) 1
1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jpg images/dsc000 95L.jpg images/dsc00131l.jpg) 指定します 2つ目は星形のマスクイメージで 星形の中に画像を表示するので id 属性 star の div 要素の中に画像 images/dsc00007l.jp を指定します 3つ目は円形のグラデーションでマスクイメージを作り その中に画像を表示するので id 属性 spot の img 要素で images/dsc00149l.jp を指定します <!DOCTYPE html> <html> <head> <title>maskanimation</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="maskanimation.css"> </head> <body> <p> CSS3 で画像をマスクし アニメーションさせる </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> CSS の記述 (MaskAnimation.css) #stage ステージのスタイルを指定します width: 700px; height: 550px; 背景に黒色を 指定します #stage { width: 700px; height: 550px; background-color: #000000; border: solid 1px #000000; position: relative; 2
MASK という文字とその下の楕円形の中に複数画像のスライドを表示する + = ( 表示する画像 ) ( マスクイメージ画像 ) ( マスク後表示画像 ) スライド画像の位置の起点を指定します position は absolute 位置は top: 20px; left: 20px;(#stage ボックスの左上端を起点とした位置 ) で指定します #slide { top: 20px; left: 20px; 4 つの画像の共通のスタイルを指定します width: 400px; height: 300px; で指定します -webkit-mask-box-image: url(images/mask1.png); で マスクイメージ画像として images/mask1.png を指定します opacity: 0.0; と指定して 見えないようにしておきます #slide img { top: 0px; left: 0px; width: 400px; height: 300px; mask-box-image: url(images/mask1.png); -webkit-mask-box-image: url(images/mask1.png); opacity: 0.0; 1 つ目の画像はアニメーション名を slide1anime 実行時間を 30s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #slide img:nth-child(1) { animation: slide1anime 30s linear 0s infinite normal; -webkit-animation: slide1anime 30s linear 0s infinite normal; 2 つ目の画像はアニメーション名を slide2anime で指定します 3
#slide img:nth-child(2) { animation: slide2anime 30s linear 0s infinite normal; -webkit-animation: slide2anime 30s linear 0s infinite normal; 3 つ目の画像はアニメーション名を slide3anime で指定します #slide img:nth-child(3) { animation: slide3anime 30s linear 0s infinite normal; -webkit-animation: slide3anime 30s linear 0s infinite normal; 4 つ目の画像はアニメーション名を slide4anime で指定します #slide img:nth-child(4) { animation: slide4anime 30s linear 0s infinite normal; -webkit-animation: slide4anime 30s linear 0s infinite normal; 5 つ目の画像はアニメーション名を slide5anime で指定します #slide img:nth-child(5) { animation: slide5anime 30s linear 0s infinite normal; -webkit-animation: slide5anime 30s linear 0s infinite normal; アニメーション名 slide1anime から slide5anime に対応するタイムライン (@keyframes) を指定します タイムラインを5 分割 ( 画像の数 ) し slide1anime は5 分割の1 番目の時間で opacity: 1.0; にしてグラデーションが見えるようにします 次に slide2anime は5 分割の2 番目の時間で opacity: 1.0; にしてグラデーションが見えるようにします 同じように slide3anime から slide5anime も 5 分割の3 番目の時間から5 番目の時間で opacity: 1.0; にして画像が見えるようにします slide1anime と slide5anime は他のタイムラインと少し違うところがあります grad1anime は タイムラインの5 番目の時間にも opacity: 1.0; にして 徐々に見えるようにします slide5anime は タイムラインの5 番目の時間を opacity: 0.0; にして 徐々に見えなくなるようにします これで画像が徐々に切り替わって永久に繰り返すように見えます 4
/* 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 { 5
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; 星形の中に画像を表示して回転移動させる + = ( 表示する画像 ) ( マスクイメージ画像 ) ( マスク後表示画像 ) 画像の位置の起点となる #star ボックスを指定します #star ボックスは 5 秒で移動するよ うにアニメーションを指定します position は absolute 位置は top: 320px; left: 10px; (#stage ボックスの左上端を起点とした位置 ) width: 250px; height: 225px; で指定しま 6
す アニメーション名を star1anime 実行時間を 5s イージングを ease-in-out 開始待ち時 間を 0s 繰り返しを infinite 実行方向は alternate で指定します #star { top: 320px; left: 10px; width: 250px; height: 225px; animation: star1anime 5s ease-in-out 0s infinite alternate; -webkit-animation: star1anime 5s ease-in-out 0s infinite alternate; アニメーション名 star1anime に対応するタイムライン (@keyframes) を指定します top: 320px; left: 10px; から -webkit-transform: translate(420px, -300px); で X 方向に 420px Y 方向に -300px 移動させます @keyframes star1anime { from { to { transform: translate(420px, -300px); @-webkit-keyframes star1anime { from { to { -webkit-transform: translate(420px, -300px); 画像を指定します width: 250px; height: 225px; で指定します -webkit-mask-box-image: url(images/starmask2.png); で マスクイメージ画像として images/starmask2.png を指定します アニメーション名を star2anime 実行時間を 2s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #star img { top: 0px; left: 0px; width: 250px; height: 225px; 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; 7
アニメーション名 star2anime に対応するタイムライン (@keyframes) を指定します -webkit-transform: rotatey(360deg); で Y 軸の正の方向から見て時計方向に 360 度回転 (1 回転 ) させます @keyframes star2anime { from { to { transform: rotatey(360deg); @-webkit-keyframes star2anime { from { to { -webkit-transform: rotatey(360deg); 円形のグラデーションの中に画像を表示して移動させる + = ( 表示する画像 ) ( マスクイメージ ) ( マスク後表示画像 ) 画像 #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 で指定します #spot { top: 330px; left: 450px; width: 250px; height: 225px; 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%); 8
animation: spotanime 20s ease-in-out 0s infinite normal; -webkit-animation: spotanime 20s ease-in-out 0s infinite normal; アニメーション名 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); 9