1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています 近い将来 webkit 系以外のブラウザでも Reflection が使えるようになるでしょう サンプルCSSのスクリプトには box-reflect と-webkit-box-reflect を指定してありますが 現在のところ機能するのは-webkit-box-reflect の方だけです サンプル CSS1 上下左右の反射画像を移動させる (1) 注意 :Chrome と Safari だけの機能です (2015 年 12 月 5 日現在 ) 1 つの画像に反射画像は 1 方向にしか指定できません また -webkit-box-reflect プロパテ ィはアニメーションできないので 元の画像と反射画像の隙間の距離 の値を増減して移 1
動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属性 wrap の div 要素の中に div 要素を5つ指定し 1 番目から4 番目の div 要素の中には画像 images/dsc00203s.jpg と span 要素を指定します 5 番目の div 要素の中には画像 images/dsc00203s.jpg とだけを指定します <!DOCTYPE html> <html> <head> <title>reflectanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reflectanime1.css"> </head> <body> <p> 写像をアニメーションで動かす (1)</p> <div id="stage"> <div id="wrap"> <div> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <div> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <div> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <div> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <div> <img src="images/dsc00203s.jpg" alt="green road"> </body> </html> CSS の記述 (ReflectAnime1.css) #stage ステージのスタイルを指定します width: 600px; height: 500px; 背景に黒色を 指定します overflow: hidden; を指定しておきます 2
#stage { width: 600px; height: 500px; background-color: #000000; position: relative; overflow: hidden; 画像の位置の起点を指定します position は absolute 位置は top: 180px; left: 210px; (#stage ボックスの左上端を起点とした位置 ) で指定します #wrap { top: 180px; left: 210px; 画像と黒色のボックスを入れる div 要素の共通のスタイルを指定します この div 要素を 移動させると 反射画像も一緒について来ます #wrap > div { top: 0px; left: 0px; 1つ目の div 要素はアニメーション名を ref1anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します アニメーション名 ref1anime に対応するタイムライン (@keyframes) を指定します top: -60px; で上方向へ 60px 移動させます #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; 3
2つ目の div 要素はアニメーション名を ref2anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 2.5s 繰り返しを infinite 実行方向は alternate で指定します アニメーション名 ref2anime に対応するタイムライン (@keyframes) を指定します left: 60px; で右方向へ 60px 移動させます #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; 3つ目の div 要素はアニメーション名を ref3anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 5s 繰り返しを infinite 実行方向は alternate で指定します アニメーション名 ref3anime に対応するタイムライン (@keyframes) を指定します top: 60px; で下方向へ 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; 4 つ目の div 要素はアニメーション名を ref4anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 7.5s 繰り返しを infinite 実行方向は alternate で指定 します アニメーション名 ref4anime に対応するタイムライン (@keyframes) を指定します left: 4
-60px; で左方向へ 60px 移動させます #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; 5 つ目の div 要素はアニメーションの指定はしません 中心に表示される画像になります #wrap > div:nth-child(5) { div 要素に入れる画像の共通のプロパティと値を指定します width: 180px; height: 135px; で指定します border-radius: 20px; で 4 隅を丸くします #wrap > div img { top: 0px; left: 0px; width: 180px; height: 135px; border-radius: 20px; 1つ目の画像の反射画像を指定します 上方向で 元の画像と反射画像の隙間の距離 が 2px の反射画像で 円形グラデーションの中心が画像の 50% 150%( 左右中央で上辺から下方向へ高さの 1.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定します ( 反射画像になると 見た目は上から下方向へ黒色が薄くなっていくグラデーションになります ) #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); 5
2つ目の画像の反射画像を指定します 右方向で 元の画像と反射画像の隙間の距離 が 2px の反射画像で 円形グラデーションの中心が画像の-50% 50%( 上下中央で左辺から左方向へ幅の 0.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); 3つ目の画像の反射画像を指定します 下方向で 元の画像と反射画像の隙間の距離 が 2px の反射画像で 円形グラデーションの中心が画像の 50% -50%( 左右中央で上辺から上方向へ幅の 0.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定します ( 反射画像になると 見た目は下から上方向へ黒色が薄くなっていくグラデーションになります ) #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); 4つ目の画像の反射画像を指定します 左方向で 元の画像と反射画像の隙間の距離 が 2px の反射画像で 円形グラデーションの中心が画像の 150% 50%( 上下中央で左辺から右方向へ幅の 1.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定します ( 反射画像になると 見た目は左から右方向へ黒色が薄くなっていくグラデーションになります ) #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); 6
div 要素の1 番目から4 番目に入れた画像の上に覆い被せる span 要素の共通のプロパティと値を指定します width: 180px; height: 135px; で指定します border-radius: 20px; で4 隅を丸くします 背景色を #stage の背景色 ( 黒色 ) に合わせて background-color: #000000; で指定します ( 反射画像だけが見えるように 元の画像に黒色の span 要素を覆い被せて見えなくします ) #wrap > div span { top: 0px; left: 0px; width: 180px; height: 135px; border-radius: 20px; background-color: #000000; サンプル CSS2 上下左右の反射画像を移動させる (2) サンプルCSS1と同じようなアニメーションは -webkit-box-reflect プロパティを使用して反射画像を表示する方法でなくても作ることができます このサンプルCSS2の方法は 反射画像ではなく 普通の画像を 180 度回転させて反射画像のように見せて その上にグラデーションを被せる方法ですが W3C 標準仕様のプロパティだけを使用するので Chrome Safari はもちろんのこと Firefox IE でも反射画像のアニメーションのように見せることができます ReflectAnime2 の説明 HTML の記述 (ReflectAnime2.html) 7
id 属性 wrap の div 要素の中に画像 images/dsc00203s.jpg を 5 つ指定し 1 番目から 4 番 目の画像には後ろに span 要素を指定します <!DOCTYPE html> <html> <head> <title>reflectanime2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reflectanime2.css"> </head> <body> <p> 写像をアニメーションで動かす (2)</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"> </body> </html> CSS の記述 (ReflectAnime2.css) #stage ステージのスタイルを指定します width: 600px; height: 500px; 背景に黒色を 指定します overflow: hidden; を指定しておきます #stage { width: 600px; height: 500px; background-color: #000000; position: relative; overflow: hidden; 画像の位置の起点を指定します position は absolute 位置は top: 180px; left: 210px; (#stage ボックスの左上端を起点とした位置 ) で指定します #wrap { top: 180px; left: 210px; サンプル CSS1 の ReflectAnime1.css と違う点は <img src="images/dsc00203s.jpg" 8
alt="green road"> の5 番目の画像を中心にして 1 番目から4 番目の画像を上下左右に反転させて反射画像のように見せるだけなので 1 番目から4 番目の反射画像には元の画像が必要ないというところです 1つ目の画像 #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(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; 2つ目の画像 #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(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; 9
@keyframes ref2anime { from { to { left: 242px; @-webkit-keyframes ref2anime { from { to { left: 242px; 3つ目の画像 #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(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; 4 つ目の画像 #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 移動させます 10
#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; 5 つ目の画像 #wrap img:nth-of-type(5) は中心に表示される画像になります top: 0px; left: 0px; の位置 (#wrap を起点とした位置 ) に置きます #wrap > img:nth-of-type(5) { top: 0px; left: 0px; 反射画像としての画像に被せるグラデーションを描く span 要素の共通のプロパティと値を 指定します width: 180px; height: 135px; で指定します border-radius: 20px; で 4 隅 を丸くします #wrap span { width: 180px; height: 135px; border-radius: 20px; 1 つ目の画像に被せるグラデーションを指定します top: -137px; left: 0px; の位置 (#wrap を起点とした位置 ) で 円形グラデーションの中心が画像の 50% -50%( 左右中央で上辺か ら上方向へ幅の 0.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定しま す アニメーションの指定は 1 つ目の画像 #wrap img:nth-of-type(1) と同じで アニメー ション名を ref1anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します 11
#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; 2つ目の画像に被せるグラデーションを指定します top: 0px; left: 182px; の位置 (#wrap を起点とした位置 ) で 円形グラデーションの中心が画像の 150% 50%( 上下中央で左辺から右方向へ幅の 1.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定します アニメーションの指定は2つ目の画像 #wrap img:nth-of-type(2) と同じで アニメーション名を ref2anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 2.5s 繰り返しを 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; 3つ目の画像に被せるグラデーションを指定します top: 137px; left: 0px; の位置 (#wrap を起点とした位置 ) で 円形グラデーションの中心が画像の 50% 150%( 左右中央で上辺から下方向へ高さの 1.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定します アニメーションの指定は3つ目の画像 #wrap img:nth-of-type(3) と同じで アニメーション名を ref3anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 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; 12
4つ目の画像に被せるグラデーションを指定します top: 0px; left: -182px; の位置 (#wrap を起点とした位置 ) で 円形グラデーションの中心が画像の-50% 50%( 上下中央で左辺から左方向へ幅の 0.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定します アニメーションの指定は4つ目の画像 #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; 13
サンプル CSS3 -webkit-box-reflect を使わずにテキストの写像のように見せる技このサンプルCSS3もサンプルCSS2と同様にテキスト反射写像ではなく 普通のテキストを 180 度回転させて反射写像のように見せて その上にグラデーションを被せる方法ですが W3C 標準仕様のプロパティだけを使用するので Chrome Safari はもちろんのこと Firefox IE でも反射写像のアニメーションのように見せることができます ReflectAnime5 の説明 HTML の記述 (ReflectAnime5.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 ref-text の div 要素を記述し 中に span 要素を3つ記述します 1つ目と2つ目の 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> テキストの写像をアニメーションで動かす (5)</p> <div id="stage"> <div id="ref-text"> <span>reflection</span><span>reflection</span><span></span> </body> </html> 14
CSS の記述 (ReflectAnime5.css) #stage ステージのスタイルを指定します 背景色を background-color: #000000; で黒色に指定します 3 番目の span 要素が #stage からはみ出すので overflow: hidden; を指定します #stage { width: 700px; height: 420px; background-color: #000000; position: relative; overflow: hidden; テキストと写像を描く起点となる #ref-text ボックスのスタイルを指定します position は absolute 位置は top: 250px; left: 420px;(#stage ボックスの左上端を起点とした位 置 ) で指定します width と height は指定しないので大きさゼロのボックスになります /*********************************************************************/ /* ref-text については -webkit-box-reflect を使用していない ( 拡大 縮小 傾斜ができないため ) */ #ref-text { top: 250px; left: 420px; #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 で指定します #ref-text > span:nth-child(1) { top: 0px; left: 0px; width: 230px; height: 50px; text-align: center; font: bold 48px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 66px; color: lightgray; 15
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) 要素のスタイルを指定します 写像のテキスト文字 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(2) { top: 50px; left: 0px; width: 230px; height: 50px; text-align: center; font: bold 48px "MS P ゴシック ", 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; #ref-text > span:nth-child(3) 要素のスタイルを指定します 写像のテキスト文字に重ねるグラデーションになります position は absolute 位置は top: 50px; left: 0px; (#ref-text ボックスの左上端を起点とした位置 ) で指定します width は 230px height は 50px で指定します 背景色に 最上部が透明色で下へ向かって徐々に黒くなるようにグラデーションの指定をします 16
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 で指定します #ref-text > span:nth-child(3) { top: 50px; left: 0px; width: 230px; height: 50px; 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; アニメーション名 ref3anime1 に対応するタイムライン (@keyframes) を指定して テキス ト文字 Reflection を移動させます from から to の間に top: 0px; left: 0px; から top: -200px; left: -350px; へ変化させます @keyframes ref3anime1 { from { to { top: -200px; left: -350px; @-webkit-keyframes ref3anime1 { from { to { top: -200px; left: -350px; アニメーション名 ref3anime2 に対応するタイムライン (@keyframes) を指定して 写像の 17
テキスト文字 Reflection を変化させます from から to の間に top: 50px; left: 0px; から top: 70px; left: -350px; へ移動させ opacity: 0.2; で半透明にして scale(1.5, -4.5); で拡大し テキスト文字の色を color: dimgray;( 暗い灰色 ) にして 文字の周りに影をつけてぼかします @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; アニメーション名 ref3anime3 に対応するタイムライン (@keyframes) を指定して グラデーションを変化させます from から to の間に top: 50px; left: 0px; から top: 70px; left: -370px; へ移動させ top: width: 230px; から width: 270px; へ変化させ scale(1.5, -4.5); で拡大します @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); 18