© 2016 電脳 Papa 1
1333 Reflection の効果
-webkit-box-reflect プロパティをアニメーションに利用してみましょう。Reflection は
Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）のみで動かすことができます。
2013 年 12 月現在、W3C で Reflection の仕様が Working Draft（草案）となっています。近
い将来 webkit 系以外のブラウザでも Reflection が使えるようになるでしょう。
サンプルＣＳＳのスクリプトには box-reflect と-webkit-box-reflect を指定してあります
が、現在のところ機能するのは-webkit-box-reflect の方だけです。
●上下左右の反射画像を移動させる（１）。
注意：Chrome と Safari だけの機能です（2015 年 12 月 5 日現在）
。
１つの画像に反射画像は１方向にしか指定できません。また-webkit-box-reflect プロパテ
ィはアニメーションできないので、
「元の画像と反射画像の隙間の距離」の値を増減して移
サンプルＣＳＳ１
© 2016 電脳 Papa 2
動させることはできません。少し工夫が必要になります。元の画像を移動すれば反射画像
も一緒についてきますが、反射画像だけが移動するように見せたいので、元の画像の上に
は黒色のボックスを覆い被せます。
【ReflectAnime1 の説明】
〔HTML の記述（ReflectAnime1.html）
〕
id 属性 wrap の div 要素の中に div 要素を５つ指定し、１番目から４番目の div 要素の中に
は画像 images/DSC00203S.jpg と span 要素を指定します。５番目の div 要素の中には画像
images/DSC00203S.jpg とだけを指定します。
〔CSS の記述（ReflectAnime1.css）
〕
#stage ステージのスタイルを指定します。width: 600px; height: 500px;、背景に黒色を
指定します。overflow: hidden;を指定しておきます。
<!DOCTYPE html> <html> <head> <title>ReflectAnime1</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="ReflectAnime1.css"> </head> <body> <p>■写像をアニメーションで動かす。（１）</p> <div id="stage"> <div id="wrap"> <div>
<img src="images/DSC00203S.jpg" alt="Green road"><span></span> </div>
<div>
<img src="images/DSC00203S.jpg" alt="Green road"><span></span> </div>
<div>
<img src="images/DSC00203S.jpg" alt="Green road"><span></span> </div>
<div>
<img src="images/DSC00203S.jpg" alt="Green road"><span></span> </div>
<div>
<img src="images/DSC00203S.jpg" alt="Green road"> </div>
</div> </div> </body> </html>
© 2016 電脳 Papa 3
画像の位置の起点を指定します。position は absolute、位置は top: 180px; left: 210px;
（#stage ボックスの左上端を起点とした位置）で指定します。
画像と黒色のボックスを入れる div 要素の共通のスタイルを指定します。この div 要素を
移動させると、反射画像も一緒について来ます。
１つ目の div 要素はアニメーション名を ref1Anime、実行時間を 5s、イージングを
ease-in-out、開始待ち時間を 0s、繰り返しを infinite、実行方向は alternate で指定し
ます。
アニメーション名 ref1Anime に対応するタイムライン（@keyframes）を指定します。top:
-60px;で上方向へ 60px 移動させます。
#stage { width: 600px; height: 500px; background-color: #000000; position: relative; overflow: hidden; } #wrap { top: 180px; left: 210px; position: absolute; } #wrap > div { top: 0px; left: 0px; position: absolute; } #wrap > div:nth-child(1) {animation: ref1Anime 5s ease-in-out 0s infinite alternate;
-webkit-animation: ref1Anime 5s ease-in-out 0s infinite alternate; } @keyframes ref1Anime { from { } to { top: -60px; } } @-webkit-keyframes ref1Anime { from { } to { top: -60px; } }
© 2016 電脳 Papa 4
２つ目の div 要素はアニメーション名を ref2Anime、実行時間を 5s、イージングを
ease-in-out、開始待ち時間を 2.5s、繰り返しを infinite、実行方向は alternate で指定
します。
アニメーション名 ref2Anime に対応するタイムライン（@keyframes）を指定します。left:
60px;で右方向へ 60px 移動させます。
３つ目の div 要素はアニメーション名を ref3Anime、実行時間を 5s、イージングを
ease-in-out、開始待ち時間を 5s、繰り返しを infinite、実行方向は alternate で指定し
ます。
アニメーション名 ref3Anime に対応するタイムライン（@keyframes）を指定します。top:
60px;で下方向へ 60px 移動させます。
４つ目の div 要素はアニメーション名を ref4Anime、実行時間を 5s、イージングを
ease-in-out、開始待ち時間を 7.5s、繰り返しを infinite、実行方向は alternate で指定
します。
アニメーション名 ref4Anime に対応するタイムライン（@keyframes）を指定します。left:
#wrap > div:nth-child(2) {animation: ref2Anime 5s ease-in-out 2.5s infinite alternate;
-webkit-animation: ref2Anime 5s ease-in-out 2.5s infinite alternate; } @keyframes ref2Anime { from { } to { left: 60px; } } @-webkit-keyframes ref2Anime { from { } to { left: 60px; } } #wrap > div:nth-child(3) {
animation: ref3Anime 5s ease-in-out 5s infinite alternate;
-webkit-animation: ref3Anime 5s ease-in-out 5s infinite alternate; } @keyframes ref3Anime { from { } to { top: 60px; } } @-webkit-keyframes ref3Anime { from { } to { top: 60px; } }
© 2016 電脳 Papa 5
-60px;で左方向へ 60px 移動させます。
５つ目の div 要素はアニメーションの指定はしません。
中心に表示される画像になります。
div 要素に入れる画像の共通のプロパティと値を指定します。width: 180px; height: 135px;
で指定します。border-radius: 20px;で４隅を丸くします。
１つ目の画像の反射画像を指定します。上方向で「元の画像と反射画像の隙間の距離」が
2px の反射画像で、円形グラデーションの中心が画像の 50% 150%（左右中央で上辺から下
方向へ高さの 1.5 倍）の位置から円形グラデーションのマスクが掛かるように指定します。
（反射画像になると、見た目は上から下方向へ黒色が薄くなっていくグラデーションにな
ります。
）
#wrap > div:nth-child(4) {animation: ref4Anime 5s ease-in-out 7.5s infinite alternate;
-webkit-animation: ref4Anime 5s ease-in-out 7.5s infinite alternate; } @keyframes ref4Anime { from { } to { left: -60px; } } @-webkit-keyframes ref4Anime { from { } to { left: -60px; } } #wrap > div:nth-child(5) { }
#wrap > div img { top: 0px; left: 0px;
width: 180px; height: 135px; border-radius: 20px;
position: absolute; }
#wrap > div:nth-child(1) img {
box-reflect: above 2px radial-gradient(circle at 50% 150%, transparent, transparent 60%, white); -webkit-box-reflect: above 2px -webkit-radial-gradient(50% 150%, circle,
transparent, transparent 60%, white); }
© 2016 電脳 Papa 6
２つ目の画像の反射画像を指定します。右方向で「元の画像と反射画像の隙間の距離」が
2px の反射画像で、円形グラデーションの中心が画像の-50% 50%（上下中央で左辺から左方
向へ幅の 0.5 倍）の位置から円形グラデーションのマスクが掛かるように指定します。（反
射画像になると、見た目は右から左方向へ黒色が薄くなっていくグラデーションになりま
す。
）
３つ目の画像の反射画像を指定します。下方向で「元の画像と反射画像の隙間の距離」が
2px の反射画像で、円形グラデーションの中心が画像の 50% -50%（左右中央で上辺から上
方向へ幅の 0.5 倍）
の位置から円形グラデーションのマスクが掛かるように指定します。
（反
射画像になると、見た目は下から上方向へ黒色が薄くなっていくグラデーションになりま
す。
）
４つ目の画像の反射画像を指定します。左方向で「元の画像と反射画像の隙間の距離」が
2px の反射画像で、円形グラデーションの中心が画像の 150% 50%（上下中央で左辺から右
方向へ幅の 1.5 倍）
の位置から円形グラデーションのマスクが掛かるように指定します。
（反
射画像になると、見た目は左から右方向へ黒色が薄くなっていくグラデーションになりま
す。
）
#wrap > div:nth-child(2) img {
box-reflect: right 2px radial-gradient(circle at -50% 50%, transparent, transparent 60%, white); -webkit-box-reflect: right 2px -webkit-radial-gradient(-50% 50%, circle,
transparent, transparent 60%, white); }
#wrap > div:nth-child(3) img {
box-reflect: below 2px radial-gradient(circle at 50% -50%, transparent, transparent 60%, white); -webkit-box-reflect: below 2px -webkit-radial-gradient(50% -50%, circle,
transparent, transparent 60%, white); }
#wrap > div:nth-child(4) img {
box-reflect: left 2px radial-gradient(circle at 150% 50%, transparent, transparent 60%, white); -webkit-box-reflect: left 2px -webkit-radial-gradient(150% 50%, circle,
transparent, transparent 60%, white); }
© 2016 電脳 Papa 7
div 要素の１番目から４番目に入れた画像の上に覆い被せる span 要素の共通のプロパティ
と値を指定します。width: 180px; height: 135px;で指定します。border-radius: 20px;
で４隅を丸くします。背景色を#stage の背景色（黒色）に合わせて background-color:
#000000;で指定します。
（反射画像だけが見えるように、元の画像に黒色の span 要素を覆
い被せて見えなくします。
）
●上下左右の反射画像を移動させる（２）。
サンプルＣＳＳ１と同じようなアニメーションは、-webkit-box-reflect プロパティを使用
して反射画像を表示する方法でなくても作ることができます。このサンプルＣＳＳ２の方
法は、反射画像ではなく、普通の画像を 180 度回転させて反射画像のように見せて、その
上にグラデーションを被せる方法ですが、Ｗ３Ｃ標準仕様のプロパティだけを使用するの
で Chrome、Safari はもちろんのこと、Firefox、IE でも反射画像のアニメーションのよう
に見せることができます。
【ReflectAnime2 の説明】
〔HTML の記述（ReflectAnime2.html）
〕
#wrap > div span {top: 0px; left: 0px; width: 180px; height: 135px; border-radius: 20px; background-color: #000000; position: absolute; }
サンプルＣＳＳ２
© 2016 電脳 Papa 8
id 属性 wrap の div 要素の中に画像 images/DSC00203S.jpg を５つ指定し、１番目から４番
目の画像には後ろに span 要素を指定します。
〔CSS の記述（ReflectAnime2.css）
〕
#stage ステージのスタイルを指定します。width: 600px; height: 500px;、背景に黒色を
指定します。overflow: hidden;を指定しておきます。
画像の位置の起点を指定します。position は absolute、位置は top: 180px; left: 210px;
（#stage ボックスの左上端を起点とした位置）で指定します。
サンプルＣＳＳ１の ReflectAnime1.css と違う点は、<img src="images/DSC00203S.jpg"
#stage { width: 600px; height: 500px; background-color: #000000; position: relative; overflow: hidden; } <!DOCTYPE html> <html> <head> <title>ReflectAnime2</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="ReflectAnime2.css"> </head>
<body>
<p>■写像をアニメーションで動かす。（２）</p> <div id="stage">
<div id="wrap">
<img src="images/DSC00203S.jpg" alt="Green road"><span></span> <img src="images/DSC00203S.jpg" alt="Green road"><span></span> <img src="images/DSC00203S.jpg" alt="Green road"><span></span> <img src="images/DSC00203S.jpg" alt="Green road"><span></span> <img src="images/DSC00203S.jpg" alt="Green road">
</div> </div> </body> </html> #wrap { top: 180px; left: 210px; position: absolute; }
© 2016 電脳 Papa 9
alt="Green road">の５番目の画像を中心にして、１番目から４番目の画像を上下左右に反
転させて反射画像のように見せるだけなので、１番目から４番目の反射画像には元の画像
が必要ないというところです。
１つ目の画像#wrap img:nth-of-type(1)は上方の反射画像に相当します。top: -137px;
left: 0px;の位置（#wrap を起点とした位置）で、transform: rotateX(180deg);で X 軸の
方向から見て 180 度回転（反転）させます。
アニメーション名を ref1Anime、実行時間を 5s、イージングを ease-in-out、開始待ち時間
を 0s、繰り返しを infinite、実行方向は alternate で指定します。アニメーション名
ref1Anime に対応するタイムライン（@keyframes）を指定します。top: -137px; から top:
-197px;で上方向へ 60px 移動させます。
２つ目の画像#wrap img:nth-of-type(2)は右方の反射画像に相当します。top: 0px; left:
182px;の位置（#wrap を起点とした位置）で、transform: rotateY(180deg);で Y 軸の方向
から見て 180 度回転（反転）させます。
アニメーション名を ref2Anime、実行時間を 5s、イージングを ease-in-out、開始待ち時間
を 2.5s、繰り返しを infinite、実行方向は alternate で指定します。アニメーション名
ref2Anime に対応するタイムライン（@keyframes）を指定します。left: 182px; から left:
242px;で右方向へ 60px 移動させます。
#wrap img:nth-of-type(1) { top: -137px; left: 0px; transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
animation: ref1Anime 5s ease-in-out 0s infinite alternate;
-webkit-animation: ref1Anime 5s ease-in-out 0s infinite alternate; } @keyframes ref1Anime { from { } to { top: -197px; } } @-webkit-keyframes ref1Anime { from { } to { top: -197px; } } #wrap img:nth-of-type(2) { top: 0px; left: 182px; transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
animation: ref2Anime 5s ease-in-out 2.5s infinite alternate;
-webkit-animation: ref2Anime 5s ease-in-out 2.5s infinite alternate; }
© 2016 電脳 Papa 10
３つ目の画像#wrap img:nth-of-type(3)は上方の反射画像に相当します。top: 137px; left:
0px;の位置（#wrap を起点とした位置）で、transform: rotateX(180deg);で X 軸の方向か
ら見て 180 度回転（反転）させます。
アニメーション名を ref3Anime、実行時間を 5s、イージングを ease-in-out、開始待ち時間
を 5s、繰り返しを infinite、実行方向は alternate で指定します。アニメーション名
ref3Anime に対応するタイムライン（@keyframes）を指定します。top: 137px; から top:
197px;で下方向へ 60px 移動させます。
４つ目の画像#wrap img:nth-of-type(4)は右方の反射画像に相当します。top: 0px; left:
-182px;の位置（#wrap を起点とした位置）で、transform: rotateY(180deg);で Y 軸の方向
から見て 180 度回転（反転）させます。
アニメーション名を ref4Anime、実行時間を 5s、イージングを ease-in-out、開始待ち時間
を 7.5s、繰り返しを infinite、実行方向は alternate で指定します。アニメーション名
ref4Anime に対応するタイムライン（@keyframes）を指定します。left: -182px; から left:
-242px;で左方向へ 60px 移動させます。
#wrap img:nth-of-type(3) { top: 137px; left: 0px; transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
animation: ref3Anime 5s ease-in-out 5s infinite alternate;
-webkit-animation: ref3Anime 5s ease-in-out 5s infinite alternate; } @keyframes ref3Anime { from { } to { top: 197px; } } @-webkit-keyframes ref3Anime { from { } to { top: 197px; } } @keyframes ref2Anime { from { } to { left: 242px; } } @-webkit-keyframes ref2Anime { from { } to { left: 242px; } }
© 2016 電脳 Papa 11
５つ目の画像#wrap img:nth-of-type(5)は中心に表示される画像になります。top: 0px;
left: 0px;の位置（#wrap を起点とした位置）に置きます。
反射画像としての画像に被せるグラデーションを描く span 要素の共通のプロパティと値を
指定します。width: 180px; height: 135px;で指定します。border-radius: 20px;で４隅
を丸くします。
１つ目の画像に被せるグラデーションを指定します。top: -137px; left: 0px;の位置（#wrap
を起点とした位置）で、円形グラデーションの中心が画像の 50% -50%（左右中央で上辺か
ら上方向へ幅の 0.5 倍）の位置から円形グラデーションのマスクが掛かるように指定しま
す。アニメーションの指定は１つ目の画像#wrap img:nth-of-type(1)と同じで、アニメー
ション名を ref1Anime、実行時間を 5s、イージングを ease-in-out、開始待ち時間を 0s、
繰り返しを infinite、実行方向は alternate で指定します。
#wrap > img:nth-of-type(5) { top: 0px; left: 0px; position: absolute; } #wrap span { width: 180px; height: 135px; border-radius: 20px; position: absolute; } #wrap img:nth-of-type(4) { top: 0px; left: -182px; transform: rotateY(180deg); -webkit-transform: rotateY(180deg);animation: ref4Anime 5s ease-in-out 7.5s infinite alternate;
-webkit-animation: ref4Anime 5s ease-in-out 7.5s infinite alternate; } @keyframes ref4Anime { from { } to { left: -242px; } } @-webkit-keyframes ref4Anime { from { } to { left: -242px; } }
© 2016 電脳 Papa 12
２つ目の画像に被せるグラデーションを指定します。top: 0px; left: 182px;の位置（#wrap
を起点とした位置）で、円形グラデーションの中心が画像の 150% 50%（上下中央で左辺か
ら右方向へ幅の 1.5 倍）の位置から円形グラデーションのマスクが掛かるように指定しま
す。アニメーションの指定は２つ目の画像#wrap img:nth-of-type(2)と同じで、アニメー
ション名を ref2Anime、実行時間を 5s、イージングを ease-in-out、開始待ち時間を 2.5s、
繰り返しを infinite、実行方向は alternate で指定します。
３つ目の画像に被せるグラデーションを指定します。top: 137px; left: 0px;の位置（#wrap
を起点とした位置）で、円形グラデーションの中心が画像の 50% 150%（左右中央で上辺か
ら下方向へ高さの 1.5 倍）の位置から円形グラデーションのマスクが掛かるように指定し
ます。アニメーションの指定は３つ目の画像#wrap img:nth-of-type(3)と同じで、アニメ
ーション名を ref3Anime、実行時間を 5s、イージングを ease-in-out、開始待ち時間を 5s、
繰り返しを infinite、実行方向は alternate で指定します。
#wrap span:nth-of-type(1) { top: -137px; left: 0px;background-image: radial-gradient(circle at 50% -50%, black, black 60%, transparent); background-image: -webkit-radial-gradient(50% -50%, circle, black,
black 60%, transparent); animation: ref1Anime 5s ease-in-out 0s infinite alternate;
-webkit-animation: ref1Anime 5s ease-in-out 0s infinite alternate; }
#wrap span:nth-of-type(2) { top: 0px; left: 182px;
background-image: radial-gradient(circle at 150% 50%, black, black 60%, transparent); background-image: -webkit-radial-gradient(150% 50%, circle, black,
black 60%, transparent); animation: ref2Anime 5s ease-in-out 2.5s infinite alternate;
-webkit-animation: ref2Anime 5s ease-in-out 2.5s infinite alternate; }
#wrap span:nth-of-type(3) { top: 137px; left: 0px;
background-image: radial-gradient(circle at 50% 150%, black, black 60%, transparent); background-image: -webkit-radial-gradient(50% 150%, circle, black,
black 60%, transparent); animation: ref3Anime 5s ease-in-out 5s infinite alternate;
-webkit-animation: ref3Anime 5s ease-in-out 5s infinite alternate; }
© 2016 電脳 Papa 13
４つ目の画像に被せるグラデーションを指定します。top: 0px; left: -182px;の位置（#wrap
を起点とした位置）で、円形グラデーションの中心が画像の-50% 50%（上下中央で左辺か
ら左方向へ幅の 0.5 倍）の位置から円形グラデーションのマスクが掛かるように指定しま
す。
アニメーションの指定は４つ目の画像#wrap img:nth-of-type(4)と同じで、アニメーショ
ン名を ref1Anime、実行時間を 5s、イージングを ease-in-out、開始待ち時間を 7.5s、繰
り返しを infinite、実行方向は alternate で指定します。
#wrap span:nth-of-type(4) { top: 0px; left: -182px;background-image: radial-gradient(circle at -50% 50%, black, black 60%, transparent); background-image: -webkit-radial-gradient(-50% 50%, circle, black,
black 60%, transparent); animation: ref4Anime 5s ease-in-out 7.5s infinite alternate;
-webkit-animation: ref4Anime 5s ease-in-out 7.5s infinite alternate; }
© 2016 電脳 Papa 14
●-webkit-box-reflect を使わずにテキストの写像のように見せる技
このサンプルＣＳＳ３もサンプルＣＳＳ２と同様にテキスト反射写像ではなく、普通のテ
キストを 180 度回転させて反射写像のように見せて、その上にグラデーションを被せる方
法ですが、Ｗ３Ｃ標準仕様のプロパティだけを使用するので Chrome、Safari はもちろんの
こと、Firefox、IE でも反射写像のアニメーションのように見せることができます。
【ReflectAnime5 の説明】
〔HTML の記述（ReflectAnime5.html）
〕
id 属性 stage の div 要素を作り、その中に div
要素でボックスを記述します。
id 属性 ref-text の div 要素を記述し、中に
span 要素を３つ記述します。１つ目と２つ目
の span 要素にはテキストで「Reflection」と
記述します。
サンプルＣＳＳ３
<!DOCTYPE html> <html> <head> <title>ReflectAnime5</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="ReflectAnime5.css"> </head> <body> <p>■テキストの写像をアニメーションで動かす。（５）</p> <div id="stage"> <div id="ref-text"> <span>Reflection</span><span>Reflection</span><span></span> </div> </div> </body> </html>
© 2016 電脳 Papa 15
〔CSS の記述（ReflectAnime5.css）
〕
#stage ステージのスタイルを指定します。背景色を background-color: #000000;で黒色に
指定します。３番目の span 要素が#stage からはみ出すので、overflow: hidden;を指定し
ます。
テキストと写像を描く起点となる#ref-text ボックスのスタイルを指定します。position
は absolute、位置は top: 250px; left: 420px;（#stage ボックスの左上端を起点とした位
置）で指定します。width と height は指定しないので大きさゼロのボックスになります。
#ref-text > span:nth-child(1)要素のスタイルを指定します。テキスト文字「Reflection」
のスタイルになります。position は absolute、位置は top: 0px; left: 0px; （#ref-text
ボックスの左上端を起点とした位置）で指定します。width は 230px、height は 50px で指
定します。テキストのフォントなどの指定をします。
アニメーション名を ref3Anime1、実行時間を 8s、イージングを ease-in-out、開始待ち時
間を 0s、繰り返しを infinite、実行方向は alternate で指定します。
#stage { width: 700px; height: 420px; background-color: #000000; position: relative; overflow: hidden; } #ref-text > span:nth-child(1) { top: 0px; left: 0px; width: 230px; height: 50px; position: absolute; text-align: center;font: bold 48px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 66px; color: lightgray; /*********************************************************************/ /* ref-text については、-webkit-box-reflect を使用していない（拡大・縮小・傾斜が できないため）。*/ #ref-text { top: 250px; left: 420px; position: absolute; }
© 2016 電脳 Papa 16
#ref-text > span:nth-child(2) 要 素 の ス タ イ ル を 指 定 し ま す 。 写 像 の テ キ ス ト 文 字
「Reflection」のスタイルになります。position は absolute、位置は top: 50px; left: 0px;
（#ref-text ボックスの左上端を起点とした位置）で指定します。width は 230px、height
は 50px で指定します。テキストのフォントなどの指定をします。line-height: 60px;にし
ているので注意してください。
transform: perspective(500px) rotateX(60deg) scale(1.1, -2.5);とし、scale(1.1, -2.5)
で横方向を 1.1 倍、縦方向を-2.5 倍に拡大させ、テキスト文字を上下反転（縦方向を-2.5
倍と負の数値にすることで上下反転します）させます。rotateX(60deg)で文字を傾け、
perspective(500px)で遠近感を出します。
アニメーション名を ref3Anime2、実行時間を 8s、イージングを ease-in-out、開始待ち時
間を 0s、繰り返しを infinite、実行方向は alternate で指定します。
#ref-text > span:nth-child(3)要素のスタイルを指定します。写像のテキスト文字に重ね
るグラデーションになります。position は absolute、位置は top: 50px; left: 0px;
（#ref-text ボックスの左上端を起点とした位置）で指定します。width は 230px、height
は 50px で指定します。
背景色に、最上部が透明色で下へ向かって徐々に黒くなるようにグラデーションの指定を
します。
animation: ref3Anime1 8s ease-in-out 0s infinite alternate;
-webkit-animation: ref3Anime1 8s ease-in-out 0s infinite alternate; } #ref-text > span:nth-child(2) { top: 50px; left: 0px; width: 230px; height: 50px; position: absolute; text-align: center;
font: bold 48px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 60px;
color: lightgray;
transform: perspective(500px) rotateX(60deg) scale(1.1, -2.5);
-webkit-transform: perspective(500px) rotateX(60deg) scale(1.1, -2.5);
animation: ref3Anime2 8s ease-in-out 0s infinite alternate;
-webkit-animation: ref3Anime2 8s ease-in-out 0s infinite alternate; }
© 2016 電脳 Papa 17
transform: perspective(500px) rotateX
(60deg) scale(1.1, -2.5);とし、scale(1.1,
-2.5)で横方向を 1.1 倍、縦方向を-2.5 倍に
拡大させ、グラデーションを上下反転（縦
方向を-2.5 倍と負の数値にすることで上下
反転します）させます。rotateX(60deg)で
グラデーションを傾け、perspective
(500px)で遠近感を出します。
アニメーション名を ref3Anime3、実行時間を 8s、イージングを ease-in-out、開始待ち時
間を 0s、繰り返しを infinite、実行方向は alternate で指定します。
アニメーション名 ref3Anime1 に対応するタイムライン（@keyframes）を指定して、テキス
ト文字「Reflection」を移動させます。from から to の間に top: 0px; left: 0px;から top:
-200px; left: -350px;へ変化させます。
アニメーション名 ref3Anime2 に対応するタイムライン（@keyframes）を指定して、写像の
@keyframes ref3Anime1 { from { } to { top: -200px; left: -350px; } } @-webkit-keyframes ref3Anime1 { from { } to { top: -200px; left: -350px; } } #ref-text > span:nth-child(3) { top: 50px; left: 0px; width: 230px; height: 50px; position: absolute;background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 1)); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.5) 30%,
rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 1));
transform: perspective(500px) rotateX(60deg) scale(1.1, -2.5);
-webkit-transform: perspective(500px) rotateX(60deg) scale(1.1, -2.5);
animation: ref3Anime3 8s ease-in-out 0s infinite alternate;
-webkit-animation: ref3Anime3 8s ease-in-out 0s infinite alternate; }
© 2016 電脳 Papa 18
テキスト文字「Reflection」を変化させます。
from から to の間に top: 50px; left: 0px;から top: 70px; left: -350px;へ移動させ、
opacity: 0.2;で半透明にして、scale(1.5, -4.5);で拡大し、テキスト文字の色を color:
dimgray;（暗い灰色）にして、文字の周りに影をつけてぼかします。
アニメーション名 ref3Anime3 に対応するタイムライン（@keyframes）を指定して、グラデ
ーションを変化させます。
from から to の間に top: 50px; left: 0px;から top: 70px; left: -370px;へ移動させ、top:
width: 230px;から width: 270px;へ変化させ、scale(1.5, -4.5);で拡大します。
@keyframes ref3Anime2 { from { }
to { top: 70px; left: -350px; opacity: 0.2; transform: perspective(500px) rotateX(60deg) scale(1.5, -4.5); color: dimgray;
text-shadow: 1px 1px 10px dimgray, -1px 1px 10px dimgray, 1px -1px 10px dimgray, -1px -1px 10px dimgray; }
}
@-webkit-keyframes ref3Anime2 { from { }
to { top: 70px; left: -350px; opacity: 0.2; -webkit-transform: perspective(500px) rotateX(60deg) scale(1.5, -4.5); color: dimgray;
text-shadow: 1px 1px 10px dimgray, -1px 1px 10px dimgray, 1px -1px 10px dimgray, -1px -1px 10px dimgray; }
}
@keyframes ref3Anime3 { from { }
to { top: 70px; left: -370px; width: 270px; transform: perspective(500px) rotateX(60deg) scale(1.5, -4.5); }
}
@-webkit-keyframes ref3Anime3 { from { }
to { top: 70px; left: -370px; width: 270px; -webkit-transform: perspective(500px) rotateX(60deg) scale(1.5, -4.5); }
