<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

Size: px

Start display at page:

Download "<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea"

あつとしかせ
5 years ago
Views:

1 1335 見出し ( タイトル ) のアニメーション見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが W3C 仕様には同様の機能がないので webkit 系以外のブラウザ (Firefox IE など ) はテキストの色を color プロパティで指定するだけになります本章のサンプルCSSには text-stroke-width text-stroke-color および text-fill-color プロパティを指定していますが実際には機能しませんテキストの輪郭は多用されそうですが残念ながら現在の W3C 仕様ではできません将来仕様に取り込まれるかもしれません (2015 年 12 月 7 日現在 ) サンプル CSS1 見出しの文字を順番に見えるようにするアニメーション TitleAnime01 の説明 HTML の記述 (TitleAnime01.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します 1

2 <!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </head> <body> 文字を順番に見えるようにする <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime01.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; #div1 ボックスを記述します top left width と height は指定しません (#stage ボックスに収まる最大のサイズになります ) ここで text-align: center; を指定することによって span 要素が #div1 ボックスの中央に配置されますテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: orange;( オレンジ色 ) で指定します #div1 { text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: orange; 1 番目の span 要素を記述しますアニメーション名を char1anime 実行時間を 12s イー 2

3 ジングを ease-in 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますアニメーション名 char1anime に対応するタイムラインを指定します見出しの文字を順番に見えるようにするために 0%~10% は opacity: 0.0; 10%~20% で opacity: 1.0; に変化させ 20%~100% を opacity: 1.0; にします #div1 > span:nth-child(1) { animation: char1anime 12s ease-in 0s infinite normal; -webkit-animation: char1anime 12s ease-in 0s infinite char1anime { 0% { opacity: 0.0; 10% { opacity: 0.0; 20% { opacity: 1.0; 100% { opacity: char1anime { 0% { opacity: 0.0; 10% { opacity: 0.0; 20% { opacity: 1.0; 100% { opacity: 1.0; 同じように2 番目の span 要素から6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名と opacity: 0.0; から opacity: 1.0; に変化させるタイミングです次のように指定します span 要素の順番アニメーション名変化させるタイミング 1 番目 char1anime 10%~20% 2 番目 char2anime 20%~30% 3 番目 char3anime 30%~40% 4 番目 char4anime 40%~50% 5 番目 char5anime 50%~60% 6 番目 char6anime 60%~70% 3

サンプル CSS2 見出しの文字を順番に回転させるアニメーション TitleAnime02 の説明 HTML の記述 (TitleAnime02.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!

4 サンプル CSS2 見出しの文字を順番に回転させるアニメーション TitleAnime02 の説明 HTML の記述 (TitleAnime02.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime02</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime02.css"> </head> <body> 文字を順番に回転させる <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime02.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 4

5 #div1 ボックスを記述します top left width と height は指定しません (#stage ボックスに収まる最大のサイズになります ) ここで text-align: center; を指定することによって span 要素が #div1 ボックスの中央に配置されますテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: orange;( オレンジ色 ) で指定します #div1 { text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: orange; 1 番目の span 要素を記述しますアニメーション名を char1anime 実行時間を 12s イージングを ease-in-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますアニメーション名 char1anime に対応するタイムライン (@keyframes) を指定します見出しの文字を順番に見えるようにするために 0%~10% は rotatez(0deg); 10%~20% で rotatez(360deg); に変化させ 20%~100% を rotatez(360deg); にします #div1 > span:nth-child(1) { animation: char1anime 12s ease-in-out 0s infinite normal; -webkit-animation: char1anime 12s ease-in-out 0s infinite char1anime { 0% { 10% { transform: rotatez(0deg); 20% { transform: rotatez(360deg); 100% { transform: char1anime { 0% { 10% { -webkit-transform: rotatez(0deg); 20% { -webkit-transform: rotatez(360deg); 100% { -webkit-transform: rotatez(360deg); 同じように 2 番目の span 要素から 6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名と rotatez(0deg); から rotatez(360deg); に変化させるタイミングです次のように指定します 5

6 span 要素の順番アニメーション名変化させるタイミング 1 番目 char1anime 10%~20% 2 番目 char2anime 20%~30% 3 番目 char3anime 30%~40% 4 番目 char4anime 40%~50% 5 番目 char5anime 50%~60% 6 番目 char6anime 60%~70% 6

サンプル CSS3 見出しの文字を順番に振動させるアニメーション TitleAnime03 の説明 HTML の記述 (TitleAnime03.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!

7 サンプル CSS3 見出しの文字を順番に振動させるアニメーション TitleAnime03 の説明 HTML の記述 (TitleAnime03.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime03</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime03.css"> </head> <body> 文字を順番に振動させる <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime03.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 7

8 #div1 ボックスを記述します top left width と height は指定しません (#stage ボックスに収まる最大のサイズになります ) ここで text-align: center; を指定することによって span 要素が #div1 ボックスの中央に配置されますテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: orange;( オレンジ色 ) で指定します #div1 { text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: orange; 1 番目の span 要素を記述しますアニメーション名を char1anime 実行時間を 12s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますアニメーション名 char1anime に対応するタイムライン (@keyframes) を指定します見出しの文字を順番に見えるようにするために 0% ~ 10% は translate(0px, 0px) rotatez(0deg); 10% ~ 11% で translate(3px, 0px) rotatez(5deg); に 11% ~ 12% で translate(-3px, 0px) rotatez(-5deg); に 12% ~ 13% で translate(-3px, 0px) rotatez(5deg); に 13% ~ 14% で translate(3px, 0px) rotatez(-5deg); に 14% ~15% で translate(3px, 0px) rotatez(5deg); にしますこれを 15%~19% で同じように繰り返し 19%~20% で translate(0px, 0px) rotatez(0deg); に戻しますこれで文字を振動させることができます #div1 > span:nth-child(1) { animation: char1anime 12s linear 0s infinite normal; -webkit-animation: char1anime 12s linear 0s infinite char1anime { 0% { transform: translate(0px, 0px) rotatez(0deg); 10% { transform: translate(0px, 0px) rotatez(0deg); 11% { transform: translate(3px, 0px) rotatez(5deg); 12% { transform: translate(-3px, 0px) rotatez(-5deg); 13% { transform: translate(-3px, 0px) rotatez(5deg); 14% { transform: translate(3px, 0px) rotatez(-5deg); 15% { transform: translate(3px, 0px) rotatez(5deg); 16% { transform: translate(-3px, 0px) rotatez(-5deg); 17% { transform: translate(-3px, 0px) rotatez(5deg); 18% { transform: translate(3px, 0px) rotatez(-5deg); 19% { transform: translate(3px, 0px) rotatez(5deg); 8

9 20% { transform: translate(0px, 0px) rotatez(0deg); 100% { transform: translate(0px, 0px) char1anime { 0% { -webkit-transform: translate(0px, 0px) rotatez(0deg); 10% { -webkit-transform: translate(0px, 0px) rotatez(0deg); 11% { -webkit-transform: translate(3px, 0px) rotatez(5deg); 12% { -webkit-transform: translate(-3px, 0px) rotatez(-5deg); 13% { -webkit-transform: translate(-3px, 0px) rotatez(5deg); 14% { -webkit-transform: translate(3px, 0px) rotatez(-5deg); 15% { -webkit-transform: translate(3px, 0px) rotatez(5deg); 16% { -webkit-transform: translate(-3px, 0px) rotatez(-5deg); 17% { -webkit-transform: translate(-3px, 0px) rotatez(5deg); 18% { -webkit-transform: translate(3px, 0px) rotatez(-5deg); 19% { -webkit-transform: translate(3px, 0px) rotatez(5deg); 20% { -webkit-transform: translate(0px, 0px) rotatez(0deg); 100% { -webkit-transform: translate(0px, 0px) rotatez(0deg); 同じように2 番目の span 要素から6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名と文字を振動させるタイミングです次のように指定します span 要素の順番アニメーション名振動させるタイミング 1 番目 char1anime 10%~20% 2 番目 char2anime 20%~30% 3 番目 char3anime 30%~40% 4 番目 char4anime 40%~50% 5 番目 char5anime 50%~60% 6 番目 char6anime 60%~70% 9

サンプル CSS4 左右両端から文字が寄ってくるアニメーション TitleAnime04 の説明 HTML の記述 (TitleAnime04.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!

10 サンプル CSS4 左右両端から文字が寄ってくるアニメーション TitleAnime04 の説明 HTML の記述 (TitleAnime04.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime04</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime04.css"> </head> <body> 左右両端から文字が寄ってくる <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime04.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 10

11 #div1 ボックスを記述します位置は top: 0px; left: 0px;(#stage ボックスの左上端を基準とした位置 ) で指定します width: 670px; height: 150px; で指定します overflow: hidden; を指定します #div1 { top: 0px; left: 0px; width: 670px; height: 150px; position: absolute; overflow: hidden; #div1 ボックスの子要素の span 要素の共通のプロパティと値をまとめて記述します位置は top: 0px;(# div1 ボックスの左上端を基準とした位置 ) で指定します left は文字ごとに移動させるのでここでは指定しません text-align: center; でテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: orange;( オレンジ色 ) で指定します #div1 span { top: 0px; text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: orange; position: absolute; 1 番目の span 要素を記述します位置は left: -100px; に指定しますアニメーション名を char1anime 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますアニメーション名 char1anime に対応するタイムライン (@keyframes) を指定します 60% ~70% で left: -100px; から left: 16px; へ移動させますその際に 60% でイージングを animation-timing-function: ease-out; で指定し ease-out で移動するようにします #div1 > span:nth-child(1) { left: -100px; animation: char1anime 6s linear 0s infinite normal; -webkit-animation: char1anime 6s linear 0s infinite normal; 11

12 @keyframes char1anime { 0% { left: -100px; 60% { left: -100px; animation-timing-function: ease-out; 70% { left: 16px; 100% { left: char1anime { 0% { left: -100px; 60% { left: -100px; -webkit-animation-timing-function: ease-out; 70% { left: 16px; 100% { left: 16px; 同じように2 番目の span 要素から6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名と文字を移動させるタイミング移動させる方向と移動距離です次のように指定します span 要素アニメー文字を移動させる移動させるの順番ション名タイミング距離 1 番目 char1anime 60%~70% left: -100px; left: 16px; 2 番目 char2anime 40%~60% left: -100px; left: 110px; 3 番目 char3anime 10%~40% left: -100px; left: 210px; 4 番目 char4anime 10%~40% left: 680px; left: 290px; 5 番目 char5anime 40%~60% left: 680px; left: 410px; 6 番目 char6anime 60%~70% left: 680px; left: 530px; イージングの指定は次のようにします 1 番目と6 番目は 60% で animation-timing-function: ease-out; で指定します 2 番目と5 番目は 40% で animation-timing-function: ease-out; で指定します 3 番目と4 番目は 10% で animation-timing-function: ease-out; で指定します 12

13 サンプル CSS5 上や下から文字が寄ってくるアニメーション TitleAnime05 の説明 HTML の記述 (TitleAnime05.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime05</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime05.css"> </head> <body> 文字が上や下から寄ってくる <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime05.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 13

14 #div1 ボックスを記述します位置は top: 0px; left: 0px;(#stage ボックスの左上端を基準とした位置 ) で指定します width: 670px; height: 150px; で指定します overflow: hidden; を指定します #div1 { top: 0px; left: 0px; width: 670px; height: 150px; position: absolute; overflow: hidden; #div1 ボックスの子要素の span 要素の共通のプロパティと値をまとめて記述します top と left は文字ごとに移動させるのでここでは指定しません text-align: center; でテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: orange;( オレンジ色 ) で指定します #div1 span { text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: orange; position: absolute; 1 番目の span 要素を記述します位置は top: -120px; left: -100px; に指定しますアニメーション名を char1anime 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますアニメーション名 char1anime に対応するタイムライン (@keyframes) を指定します 60% ~70% で top: -120px; left: -100px; から top: 0px; left: 16px; へ移動させますその際に 60% でイージングを animation-timing-function: ease-out; で指定し ease-out で移動するようにします #div1 > span:nth-child(1) { top: -120px; left: -100px; animation: char1anime 6s linear 0s infinite normal; -webkit-animation: char1anime 6s linear 0s infinite char1anime { 0% { top: -120px; left: -100px; 14

15 60% { top: -120px; left: -100px; animation-timing-function: ease-out; 70% { top: 0px; left: 16px; 100% { top: 0px; left: char1anime { 0% { top: -120px; left: -100px; 60% { top: -120px; left: -100px; -webkit-animation-timing-function: ease-out; 70% { top: 0px; left: 16px; 100% { top: 0px; left: 16px; 同じように2 番目の span 要素から6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名と文字を移動させるタイミング移動させる方向と移動距離です次のように指定します span 要素アニメー文字を移動させる移動させるの順番ション名タイミング距離 1 番目 char1anime 60%~70% top: -120px; left: -100px; top: 0px; left: 16px; 2 番目 char2anime 40%~60% top: 150px; left: -100px; top: 0px; left: 110px; 3 番目 char3anime 10%~40% top: -120px; left: -100px; top: 0px; left: 210px; 4 番目 char4anime 10%~40% top: 150px; left: 680px; top: 0px; left: 290px; 5 番目 char5anime 40%~60% top: -120px; left: 680px; top: 0px; left: 410px; 6 番目 char6anime 60%~70% top: 150px; left: 680px; top: 0px; left: 530px; イージングの指定は次のようにします 1 番目と6 番目は 60% で animation-timing-function: ease-out; で指定します 2 番目と5 番目は 40% で animation-timing-function: ease-out; で指定します 3 番目と4 番目は 10% で animation-timing-function: ease-out; で指定します 15

サンプル CSS6 左右両端から文字が回転しながら寄ってくるアニメーション TitleAnime06 の説明 HTML の記述 (TitleAnime06.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!

16 サンプル CSS6 左右両端から文字が回転しながら寄ってくるアニメーション TitleAnime06 の説明 HTML の記述 (TitleAnime06.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime06</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime06.css"> </head> <body> 両端から文字が回転しながら寄ってくる <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime06.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 16

17 #div1 ボックスを記述します位置は top: 0px; left: 0px;(#stage ボックスの左上端を基準とした位置 ) で指定します width: 670px; height: 150px; で指定します overflow: hidden; を指定します #div1 { top: 0px; left: 0px; width: 670px; height: 150px; position: absolute; overflow: hidden; #div1 ボックスの子要素の span 要素の共通のプロパティと値をまとめて記述します位置は top: 0px;(# div1 ボックスの左上端を基準とした位置 ) で指定します left は文字ごとに移動させるのでここでは指定しません text-align: center; でテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: orange;( オレンジ色 ) で指定します #div1 span { top: 0px; text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: orange; position: absolute; 1 番目の span 要素を記述します位置は left: -100px; に指定しますアニメーション名を char1anime 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますアニメーション名 char1anime に対応するタイムライン (@keyframes) を指定します 60% ~70% で rotatez(0deg); から rotatez(360deg); に変化させて時計回りに 360 度回転 (1 回転 ) させながら left: -100px; から left: 16px; へ移動させますその際に 60% でイージングを animation-timing-function: ease-out; で指定し ease-out で回転移動するようにします #div1 > span:nth-child(1) { left: -100px; animation: char1anime 6s linear 0s infinite normal; -webkit-animation: char1anime 6s linear 0s infinite normal; 17

18 @keyframes char1anime { 0% { left: -100px; transform: rotatez(0deg); 60% { left: -100px; transform: rotatez(0deg); animation-timing-function: ease-out; 70% { left: 16px; transform: rotatez(360deg); 100% { left: 16px; transform: char1anime { 0% { left: -100px; -webkit-transform: rotatez(0deg); 60% { left: -100px; -webkit-transform: rotatez(0deg); -webkit-animation-timing-function: ease-out; 70% { left: 16px; -webkit-transform: rotatez(360deg); 100% { left: 16px; -webkit-transform: rotatez(360deg); 同じように2 番目の span 要素から6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名と文字を移動回転させるタイミング移動させる方向と移動距離回転角度です次のように指定します span 要素アニメー文字を移動させる移動させる距離の順番ション名タイミング回転角度 1 番目 char1anime 60%~70% left: -100px; left: 20px; rotatez(0deg); rotatez(360deg); 2 番目 char2anime 40%~60% left: -100px; left: 110px; rotatez(0deg); rotatez(720deg); 3 番目 char3anime 10%~40% left: -100px; left: 210px; rotatez(0deg); rotatez(1080deg); 4 番目 char4anime 10%~40% left: 680px; left: 290px; rotatez(0deg); rotatez(-1080deg); 5 番目 char5anime 40%~60% left: 680px; left: 410px; rotatez(0deg); rotatez(-720deg); 6 番目 char6anime 60%~70% left: 680px; left: 530px; rotatez(0deg); rotatez(-360deg); イージングの指定は次のようにします 1 番目と6 番目は 60% で animation-timing-function: ease-out; で指定します 2 番目と5 番目は 40% で animation-timing-function: ease-out; で指定します 3 番目と4 番目は 10% で animation-timing-function: ease-out; で指定します 18

サンプル CSS7 上や下から文字が回転しながら寄ってくるアニメーション TitleAnime07 の説明 HTML の記述 (TitleAnime07.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!

19 サンプル CSS7 上や下から文字が回転しながら寄ってくるアニメーション TitleAnime07 の説明 HTML の記述 (TitleAnime07.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime07</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime07.css"> </head> <body> 文字が上や下から回転しながら寄ってくる <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime07.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 19

20 #div1 ボックスを記述します位置は top: 0px; left: 0px;(#stage ボックスの左上端を基準とした位置 ) で指定します width: 670px; height: 150px; で指定します overflow: hidden; を指定します #div1 { top: 0px; left: 0px; width: 670px; height: 150px; position: absolute; overflow: hidden; #div1 ボックスの子要素の span 要素の共通のプロパティと値をまとめて記述します top と left は文字ごとに移動させるのでここでは指定しません text-align: center; でテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: orange;( オレンジ色 ) で指定します #div1 span { text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: orange; position: absolute; 1 番目の span 要素を記述します位置は top: -120px; left: -100px; に指定しますアニメーション名を char1anime 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますアニメーション名 char1anime に対応するタイムライン (@keyframes) を指定します 60% ~70% で top: -120px; left: -100px; から top: 0px; left: 16px; へ移動させ rotatez(0deg); から rotatez(360deg); で時計回りに 360 度回転 (1 回転 ) させますその際に 60% でイージングを animation-timing-function: ease-out; で指定し ease-out で移動するようにします #div1 > span:nth-child(1) { top: -120px; left: -100px; animation: char1anime 6s linear 0s infinite normal; -webkit-animation: char1anime 6s linear 0s infinite normal; 20

21 @keyframes char1anime { 0% { top: -120px; left: -100px; transform: rotatez(0deg); 60% { top: -120px; left: -100px; transform: rotatez(0deg); animation-timing-function: ease-out; 70% { top: 0px; left: 20px; transform: rotatez(360deg); 100% { top: 0px; left: 20px; transform: char1anime { 0% { top: -120px; left: -100px; -webkit-transform: rotatez(0deg); 60% { top: -120px; left: -100px; -webkit-transform: rotatez(0deg); -webkit-animation-timing-function: ease-out; 70% { top: 0px; left: 20px; -webkit-transform: rotatez(360deg); 100% { top: 0px; left: 20px; -webkit-transform: rotatez(360deg); 同じように 2 番目の span 要素から 6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名と文字を移動させるタイミング移動させる方向と移動距離回転角度です次のように指定します span 要素アニメー文字を移動させる移動させる距離の順番ション名タイミング回転角度 1 番目 char1anime 60%~70% top: -120px; left: -100px; 21 rotatez(0deg); top: 0px; left: 16px; rotatez(360deg); 2 番目 char2anime 40%~60% top: 150px; left: -100px; rotatez(0deg); top: 0px; left: 110px; rotatez(720deg); 3 番目 char3anime 10%~40% top: -120px; left: -100px; rotatez(0deg); top: 0px; left: 210px; rotatez(1080deg); 4 番目 char4anime 10%~40% top: 150px; left: 680px; rotatez(0deg); top: 0px; left: 290px; rotatez(-1080deg); 5 番目 char5anime 40%~60% top: -120px; left: 680px; rotatez(0deg);

22 top: 0px; left: 410px; rotatez(-720deg); 6 番目 char6anime 60%~70% top: 150px; left: 680px; rotatez(0deg); top: 0px; left: 530px; rotatez(-360deg); イージングの指定は次のようにします 1 番目と6 番目は 60% でイージングを animation-timing-function: ease-out; で指定します 2 番目と5 番目は 40% でイージングを animation-timing-function: ease-out; で指定します 3 番目と4 番目は 10% でイージングを animation-timing-function: ease-out; で指定します 22

サンプル CSS8 文字が順番に転がってくるアニメーション TitleAnime08 の説明 HTML の記述 (TitleAnime08.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!

23 サンプル CSS8 文字が順番に転がってくるアニメーション TitleAnime08 の説明 HTML の記述 (TitleAnime08.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime08</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime08.css"> </head> <body> 文字が順番に転がってくる <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime08.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 23

24 #div1 ボックスを記述します位置は top: 0px; left: 0px;(#stage ボックスの左上端を基準とした位置 ) で指定します width: 670px; height: 150px; で指定します overflow: hidden; を指定します #div1 { top: 0px; left: 0px; width: 670px; height: 150px; position: absolute; overflow: hidden; #div1 ボックスの子要素の span 要素の共通のプロパティと値をまとめて記述します位置は top: 0px; left: 0px;(# div1 ボックスの左上端を基準とした位置 ) で指定します left は文字ごとに移動させるのでここでは指定しません text-align: center; でテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: orange;( オレンジ色 ) で指定します #div1 span { top: 0px; left: 0px; text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: orange; position: absolute; 1 番目の span 要素を記述します位置は left: -120px; に指定しますアニメーション名を char1anime 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますアニメーション名 char1anime に対応するタイムライン (@keyframes) を指定します 55% ~65% で rotatez(0deg); から rotatez(360deg); に変化させて時計回りに 360 度回転 (1 回転 ) させながら left: -120px; から left: 16px; へ移動させますその際に 55% でイージングを animation-timing-function: ease-out; で指定し ease-out で回転移動するようにします #div1 > span:nth-child(1) { left: -120px; animation: char1anime 6s linear 0s infinite normal; -webkit-animation: char1anime 6s linear 0s infinite normal; 24

25 @keyframes char1anime { 0% { left: -120px; transform: rotatez(0deg); 55% { left: -120px; transform: rotatez(0deg); animation-timing-function: ease-out; 65% { left: 16px; transform: rotatez(360deg); 100% { left: 16px; transform: char1anime { 0% { left: -120px; -webkit-transform: rotatez(0deg); 55% { left: -120px; -webkit-transform: rotatez(0deg); -webkit-animation-timing-function: ease-out; 65% { left: 16px; -webkit-transform: rotatez(360deg); 100% { left: 16px; -webkit-transform: rotatez(360deg); 同じように 2 番目の span 要素から 6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名と文字を移動回転させるタイミング移動させる方向と移動距離回転角度です次のように指定します span 要素アニメー文字を移動させる移動させる距離の順番ション名タイミング回転角度 1 番目 char1anime 55%~65% left: -120px; left: 16px; 25 rotatez(0deg); rotatez(360deg); 2 番目 char2anime 45%~60% left: -120px; left: 110px; rotatez(0deg); rotatez(360deg); 3 番目 char3anime 35%~50% left: -120px; left: 210px; rotatez(0deg); rotatez(720deg); 4 番目 char4anime 30%~45% left: -120px; left: 290px; rotatez(0deg); rotatez(720deg); 5 番目 char5anime 20%~40% left: -120px; left: 410px; rotatez(0deg); rotatez(1080deg); 6 番目 char6anime 10%~30% left: -120px; left: 530px; イージングの指定は次のようにします rotatez(0deg); rotatez(1080deg); 1 番目は 55% で animation-timing-function: ease-out; で指定します 2 番目は 45% で animation-timing-function: ease-out; で指定します 3 番目は 35% で animation-timing-function: ease-out; で指定します 4 番目は 30% で animation-timing-function: ease-out; で指定します 5 番目は 20% で animation-timing-function: ease-out; で指定します 6 番目は 10% で animation-timing-function: ease-out; で指定します

26 サンプル CSS9 ネオンサインのように文字を順番に光り始めるようにするアニメーション (webkit 系 ) ( その他 ) TitleAnime09 の説明 HTML の記述 (TitleAnime09.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime09</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime09.css"> </head> <body> ネオンサインのように文字を順番に光り始めるようにする <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime09.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #000000; 26

27 ( 黒色 ) で指定します #stage { width: 670px; height: 150px; background-color: #000000; position: relative; #div1 ボックスを記述します top left width と height は指定しません (#stage ボックスに収まる最大のサイズになります ) ここで text-align: center; を指定することによって span 要素が #div1 ボックスの中央に配置されますテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を webkit 系は輪郭を-webkit-text-stroke-width: 4px; -webkit-text-stroke-color: #663366;( 少し暗い紫色 ) 文字の内容を -webkit-text-fill-color: transparent;( 透明 ) で指定します Webkit 系以外は各テキストの span ボックスごとにテキストの色を指定するのでここでは指定しません #div1 { text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; -webkit-text-stroke-width: 4px; -webkit-text-stroke-color: #663366; -webkit-text-fill-color: transparent; 1 番目の span 要素を記述しますアニメーション名を char1anime 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますアニメーション名 char1anime に対応するタイムライン (@keyframes) を指定しますテキスト文字をネオンサインが光るように見せるために 0%~10% はテキスト文字の色を color: #330033;( 暗い紫色 ) 影を text-shadow: 4px 0px 2px #663366, -4px 0px 2px #663366, 0px 4px 2px #663366, 0px -4px 2px #663366;( 少し暗い紫色 ) 10%~11% でテキスト文字の色を color: pink;( ピンク色 ) 影を text-shadow: 4px 0px 2px hotpink, -4px 0px 2px hotpink, 0px 4px 2px hotpink, 0px -4px 2px hotpink;( ホットピンク色 ) に変化させ 11%~100 をそのまま継続させます webkit 系はテキストの輪郭を -webkit-text-stroke-width -webkit-text-stroke-color 文字の内容を -webkit-text-fill-color で指定済みなので -webkit-text-stroke-color と text-shadow プロパティを指定します 0% ~ 10% はテキスト文字の輪郭の色を -webkit-text-stroke-color: #663366;( 少し暗い紫色 ) 影を text-shadow: 0px 0px 20px 27

28 rgba(192,128,128,0.6); ( 暗い紫色 ) 10% ~ 11% でテキスト文字の輪郭の色を -webkit-text-stroke-color: hotpink;( ホットピンク色 ) 影を text-shadow: 0px 0px 10px rgba(255,192,203,1.0);( ピンク色 ) に変化させ 11%~100% をそのまま継続させます #div1 > span:nth-child(1) { animation: char1anime 6s linear 0s infinite normal; -webkit-animation: char1anime 6s linear 0s infinite normal; /* webkit 系ブラウザ以外は text-stroke に対応していないので color と text-shadow プロパティを使用しています char1anime { 0% { color: #330033; text-shadow: 4px 0px 2px #663366, -4px 0px 2px #663366, 0px 4px 2px #663366, 0px -4px 2px #663366; 10% { color: #330033; text-shadow: 4px 0px 2px #663366, -4px 0px 2px #663366, 0px 4px 2px #663366, 0px -4px 2px #663366; 11% { color: pink; text-shadow: 4px 0px 2px hotpink, -4px 0px 2px hotpink, 0px 4px 2px hotpink, 0px -4px 2px hotpink; 100% { color: pink; text-shadow: 4px 0px 2px hotpink, -4px 0px 2px hotpink, 0px 4px 2px hotpink, 0px -4px 2px char1anime { 0% { text-shadow: 0px 0px 20px rgba(192,128,128,0.6); 10% { -webkit-text-stroke-color: #663366; text-shadow: 0px 0px 20px rgba(192,128,128,0.6); 11% { -webkit-text-stroke-color: hotpink; text-shadow: 0px 0px 10px rgba(255,192,203,1.0); 100% { -webkit-text-stroke-color: hotpink; text-shadow: 0px 0px 10px rgba(255,192,203,1.0); 同じように2 番目の span 要素から6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名とテキストの文字や影の色を変化させるタイミングです次のように指定します span 要素の順番アニメーション名変化させるタイミング 1 番目 char1anime 10%~11% 2 番目 char2anime 20%~21% 3 番目 char3anime 30%~31% 4 番目 char4anime 40%~41% 5 番目 char5anime 50%~51% 6 番目 char6anime 60%~61% 28

DOCTYPE html> <html> <head> <title>titleanime10</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime10.

29 サンプル CSS10 ネオンサインのように 1 文字ずつ光るようにするアニメーション (webkit 系 ) ( その他 ) TitleAnime10 の説明 HTML の記述 (TitleAnime10.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime10</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime10.css"> </head> <body> ネオンサインのように文字を 1 文字ずつ光るようにする <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime10.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #000000; ( 黒色 ) で指定します 29

30 #stage { width: 670px; height: 150px; background-color: #000000; position: relative; #div1 ボックスを記述します top left width と height は指定しません (#stage ボックスに収まる最大のサイズになります ) ここで text-align: center; を指定することによって span 要素が #div1 ボックスの中央に配置されますテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を webkit 系は輪郭を-webkit-text-stroke-width: 4px; -webkit-text-stroke-color: #003399;( 少し暗い青色 ) 文字の内容を -webkit-text-fill-color: transparent;( 透明 ) で指定します Webkit 系以外は各テキストの span ボックスごとにテキストの色を指定するのでここでは指定しません #div1 { text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; -webkit-text-stroke-width: 4px; -webkit-text-stroke-color: #003399; -webkit-text-fill-color: transparent; 1 番目の span 要素を記述しますアニメーション名を char1anime 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますアニメーション名 char1anime に対応するタイムライン (@keyframes) を指定しますテキスト文字をネオンサインが 1 文字ずつ光るように見せるために次のように指定します 0%~10% はテキスト文字の色を color: #000033;( 暗い青色 ) 影を text-shadow: 4px 0px 2px #003399, -4px 0px 2px #003399, 0px 4px 2px #003399, 0px -4px 2px #003399;( 少し暗い青色 ) 10%~25% でテキスト文字の色を color: #99CCFF;( 水色 ) 影を text-shadow: 4px 0px 2px #6699FF, -4px 0px 2px #6699FF, 0px 4px 2px #6699FF, 0px -4px 2px #6699FF;( 青色 ) 25%~40% でテキスト文字の色を color: #000033;( 暗い青色 ) 影を text-shadow: 4px 0px 2px #003399, -4px 0px 2px #003399, 0px 4px 2px #003399, 0px -4px 2px #003399;( 少し暗い青色 ) へ戻します 40%~95% はそのまま継続させます 95%~96% でテキスト文字の色を color: #99CCFF;( 水色 ) 影を text-shadow: 4px 0px 2px 30

31 #6699FF, -4px 0px 2px #6699FF, 0px 4px 2px #6699FF, 0px -4px 2px #6699FF;( 青色 ) 96%~100% はそのまま継続させます #div1 > span:nth-child(1) { animation: char1banime 6s linear 0s infinite normal; -webkit-animation: char1banime 6s linear 0s infinite normal; /* webkit 系ブラウザ以外は text-stroke に対応していないので color と text-shadow プロパティを使用しています char1banime { 0% { color: #000033; text-shadow: 4px 0px 2px #003399, -4px 0px 2px #003399, 0px 4px 2px #003399, 0px -4px 2px #003399; 10% { color: #000033; text-shadow: 4px 0px 2px #003399, -4px 0px 2px #003399, 0px 4px 2px #003399, 0px -4px 2px #003399; 25% { color: #99CCFF; text-shadow: 4px 0px 2px #6699FF, -4px 0px 2px #6699FF, 0px 4px 2px #6699FF, 0px -4px 2px #6699FF; 40% { color: #000033; text-shadow: 4px 0px 2px #003399, -4px 0px 2px #003399, 0px 4px 2px #003399, 0px -4px 2px #003399; 40% { color: #000033; text-shadow: 4px 0px 2px #003399, -4px 0px 2px #003399, 0px 4px 2px #003399, 0px -4px 2px #003399; 95% { color: #000033; text-shadow: 4px 0px 2px #003399, -4px 0px 2px #003399, 0px 4px 2px #003399, 0px -4px 2px #003399; 96% { color: #99CCFF; text-shadow: 4px 0px 2px #6699FF, -4px 0px 2px #6699FF, 0px 4px 2px #6699FF, 0px -4px 2px #6699FF; 100% { color: #99CCFF; text-shadow: 4px 0px 2px #6699FF, -4px 0px 2px #6699FF, 0px 4px 2px #6699FF, 0px -4px 2px #6699FF; webkit 系はテキストの輪郭を-webkit-text-stroke-width -webkit-text-stroke-color 文字の内容を-webkit-text-fill-color で指定済みなので -webkit-text-stroke-color と text-shadow プロパティを指定します 0%~10% はテキスト文字の輪郭の色を-webkit-text-stroke-color: #003399;( 少し暗い青色 ) 影を text-shadow: 0px 0px 20px rgba(128,128,192,0.6);( 暗い青色 ) 10%~25% でテキスト文字の輪郭の色を-webkit-text-stroke-color: #6699FF;( 青色 ) 影を text-shadow: 0px 0px 10px rgba(153,204,255,1.0);( 水色 ) 25%~40% でテキスト文字の輪郭の色を-webkit-text-stroke-color: #003399;( 少し暗い青色 ) 影を text-shadow: 0px 0px 20px rgba(128,128,192,0.6);( 暗い青色 ) へ戻します 40%~95% はそのまま継続させます 95%~96% でテキスト文字の輪郭の色を-webkit-text-stroke-color: #6699FF;( 青色 ) 影を text-shadow: 0px 0px 10px rgba(153,204,255,1.0);( 水色 ) 96%~100% はそのまま継続させます 31

32 @-webkit-keyframes char1banime { 0% { text-shadow: 0px 0px 20px rgba(128,128,192,0.6); 10% { -webkit-text-stroke-color: #003399; text-shadow: 0px 0px 20px rgba(128,128,192,0.6); 25% { -webkit-text-stroke-color: #6699FF; text-shadow: 0px 0px 10px rgba(153,204,255,1.0); 40% { -webkit-text-stroke-color: #003399; text-shadow: 0px 0px 20px rgba(128,128,192,0.6); 95% { -webkit-text-stroke-color: #003399; text-shadow: 0px 0px 20px rgba(128,128,192,0.6); 96% { -webkit-text-stroke-color: #6699FF; text-shadow: 0px 0px 10px rgba(153,204,255,1.0); 100% { -webkit-text-stroke-color: #6699FF; text-shadow: 0px 0px 10px rgba(153,204,255,1.0); 同じように2 番目の span 要素から6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名とテキストの文字や影の色を変化させるタイミングです次のように指定します span 要素の順番アニメーション名変化させるタイミング 1 番目 char1anime 10%~25%~40% 2 番目 char2anime 20%~35%~50% 3 番目 char3anime 30%~45%~60% 4 番目 char4anime 40%~55%~70% 5 番目 char5anime 50%~65%~80% 6 番目 char6anime 60%~75%~90% 95% から 100% の指定は1 番目の span 要素から6 番目の span 要素まで同じ指定になります 32

33 サンプル CSS11 文字を順番にグラデーションが流れるようにするアニメーション他のサンプル CSS は各 span 要素のアニメーション開始待ち時間が 0s でしたがここでは span 要素ごとの開始待ち時間を 1s ずつ遅らせてグラデーションが流れるように見せます TitleAnime11 の説明 HTML の記述 (TitleAnime11.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime11</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime11.css"> </head> <body> 文字を順番にグラデーションが流れるようにする <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime11.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #000000; ( 黒色 ) で指定します 33

34 #stage { width: 670px; height: 150px; background-color: #000000; position: relative; #div1 ボックスを記述します top left width と height は指定しません (#stage ボックスに収まる最大のサイズになります ) ここで text-align: center; を指定することによって span 要素が #div1 ボックスの中央に配置されますテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキスト文字の色を color: # FFFF00;( 黄色 ) 影を text-shadow: 4px 0px 0px #FF6666, -4px 0px 0px #FF6666, 0px 4px 0px #FF6666, 0px -4px 0px #FF6666, 4px 4px 0px #FF6666, -4px 4px 0px #FF6666, 4px -4px 0px #FF6666, -4px -4px 0px #FF6666;( オレンジ色 ) で指定します #div1 { text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: #FFFF00; text-shadow: 4px 0px 0px #FF6666, -4px 0px 0px #FF6666, 0px 4px 0px #FF6666, 0px -4px 0px #FF6666, 4px 4px 0px #FF6666, -4px 4px 0px #FF6666, 4px -4px 0px #FF6666, -4px -4px 0px #FF6666; 1 番目の span 要素を記述しますアニメーション名を gradationanime 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #div1 > span:nth-child(1) { animation: gradationanime 6s linear 0s infinite normal; -webkit-animation: gradationanime 6s linear 0s infinite normal; 2 番目の span 要素はアニメーション名を 1 番目の span 要素と同じ gradationanime 実行時間を 6s イージングを linear 開始待ち時間を 1s 繰り返しを infinite 実行方向は normal で指定します #div1 > span:nth-child(2) { animation: gradationanime 6s linear 1s infinite normal; -webkit-animation: gradationanime 6s linear 1s infinite normal; 34

35 同じように3 番目の span 要素から6 番目の span 要素について記述します 1 番目の span 要素と違うところは開始待ち時間だけです次のように指定します span 要素の順番アニメーションの開始待ち時間 1 番目 0s 2 番目 1s 3 番目 2s 4 番目 3s 5 番目 4s 6 番目 5s アニメーション名 gradationanime に対応するタイムライン (@keyframes) を指定します 0%~50% でテキスト文字の色を color: # FF6600;( 暗い黄色 ) 影を text-shadow: 4px 0px 0px #666666, -4px 0px 0px #666666, 0px 4px 0px #666666, 0px -4px 0px #666666, 4px 4px 0px #666666, -4px 4px 0px #666666, 4px -4px 0px #666666, -4px -4px 0px #666666; ( 暗い灰色 ) にします 50%~100% でテキスト文字の色を color: # FFFF00;( 黄色 ) 影を text-shadow: 4px 0px 0px #FF6666, -4px 0px 0px #FF6666, 0px 4px 0px #FF6666, 0px -4px 0px #FF6666, 4px 4px 0px #FF6666, -4px 4px 0px #FF6666, 4px -4px 0px #FF6666, -4px -4px 0px #FF6666;( オレンジ色 ) gradationanime { 0% { color: #FFFF00; text-shadow: 4px 0px 0px #FF6666, -4px 0px 0px #FF6666, 0px 4px 0px #FF6666, 0px -4px 0px #FF6666, 4px 4px 0px #FF6666, -4px 4px 0px #FF6666, 4px -4px 0px #FF6666, -4px -4px 0px #FF6666; 50% { color: #FF6600; text-shadow: 4px 0px 0px #666666, -4px 0px 0px #666666, 0px 4px 0px #666666, 0px -4px 0px #666666, 4px 4px 0px #666666, -4px 4px 0px #666666, 4px -4px 0px #666666, -4px -4px 0px #666666; 100% { color: #FFFF00; text-shadow: 4px 0px 0px #FF6666, -4px 0px 0px #FF6666, 0px 4px 0px #FF6666, 0px -4px 0px #FF6666, 4px 4px 0px #FF6666, -4px 4px 0px #FF6666, 4px -4px 0px #FF6666, -4px -4px 0px #FF6666; webkit 系も同じ指定にします 35

36 @-webkit-keyframes gradationanime { 0% { color: #FFFF00; text-shadow: 4px 0px 0px #FF6666, -4px 0px 0px #FF6666, 0px 4px 0px #FF6666, 0px -4px 0px #FF6666, 4px 4px 0px #FF6666, -4px 4px 0px #FF6666, 4px -4px 0px #FF6666, -4px -4px 0px #FF6666; 50% { color: #FF6600; text-shadow: 4px 0px 0px #666666, -4px 0px 0px #666666, 0px 4px 0px #666666, 0px -4px 0px #666666, 4px 4px 0px #666666, -4px 4px 0px #666666, 4px -4px 0px #666666, -4px -4px 0px #666666; 100% { color: #FFFF00; text-shadow: 4px 0px 0px #FF6666, -4px 0px 0px #FF6666, 0px 4px 0px #FF6666, 0px -4px 0px #FF6666, 4px 4px 0px #FF6666, -4px 4px 0px #FF6666, 4px -4px 0px #FF6666, -4px -4px 0px #FF6666; 36

サンプル CSS12 左右両端からぼやけた文字がはっきりと見えて寄ってくるアニメーション TitleAnime12 の説明 HTML の記述 (TitleAnime12.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!

37 サンプル CSS12 左右両端からぼやけた文字がはっきりと見えて寄ってくるアニメーション TitleAnime12 の説明 HTML の記述 (TitleAnime12.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime12</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime12.css"> </head> <body> 両端からぼやけた文字がはっきりと見えて寄ってくる <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime12.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #000000; ( 黒色 ) で指定します #stage { width: 670px; height: 150px; background-color: #000000; position: relative; 37

38 #div1 ボックスを記述します位置は top: 0px; left: 0px;(#stage ボックスの左上端を基準とした位置 ) で指定します width: 670px; height: 150px; で指定します overflow: hidden; を指定します #div1 { top: 0px; left: 0px; width: 670px; height: 150px; position: absolute; overflow: hidden; #div1 ボックスの子要素の span 要素の共通のプロパティと値をまとめて記述します位置は top: 0px;(# div1 ボックスの左上端を基準とした位置 ) で指定します left は文字ごとに移動させるのでここでは指定しません text-align: center; でテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: orange;( オレンジ色 ) で指定します #div1 span { top: 0px; text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: orange; position: absolute; 1 番目の span 要素を記述します位置は left: -120px; に指定しますアニメーションの指定は文字の位置を移動させるアニメーションとぼやけた文字をはっきりした文字に変化させるアニメーションを指定します文字の位置を移動させるアニメーションはアニメーション名を char1anime 実行時間を 3s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますぼやけた文字をはっきりした文字に変化させるアニメーションはアニメーション名を shade1 実行時間を 3s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #div1 > span:nth-child(1) { left: -120px; animation: char1anime 3s linear 0s infinite normal, shade1 3s linear 0s infinite normal; -webkit-animation: char1anime 3s linear 0s infinite normal, shade1 3s linear 0s infinite normal; 38

39 同じように2 番目の span 要素から6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名です次のように指定します span 要素の順番文字を移動させるはっきりした文字に変化アニメーション名させるアニメーション名 1 番目 char1anime shade1 2 番目 char2anime shade2 3 番目 char3anime shade3 4 番目 char4anime shade4 5 番目 char5anime shade5 6 番目 char6anime shade6 アニメーション名 char1anime に対応するタイムライン (@keyframes) を指定します 60% ~70% で left: -120px; から left: 16px; へ移動させますその際に 60% でイージングを animation-timing-function: ease-out; で指定し ease-out char1anime { 0% { left: -120px; 60% { left: -120px; animation-timing-function: ease-out; 70% { left: 16px; 100% { left: char1anime { 0% { left: -120px; 60% { left: -120px; -webkit-animation-timing-function: ease-out; 70% { left: 16px; 100% { left: 16px; 同じように 2 番目の span 要素から 6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名と文字を移動させるタイミング移動させる方向と移動距離です次のように指定します span 要素アニメー文字を移動させる移動させるの順番ション名タイミング距離 1 番目 char1anime 60%~70% left: -120px; left: 16px; 2 番目 char2anime 40%~60% left: -120px; left: 110px; 3 番目 char3anime 10%~40% left: -120px; left: 210px; 4 番目 char4anime 10%~40% left: 680px; left: 290px; 5 番目 char5anime 40%~60% left: 680px; left: 410px; 39

40 6 番目 char6anime 60%~70% left: 680px; left: 530px; イージングの指定は次のタイミングで animation-timing-function: ease-out; で指定します 1 番目と6 番目は 60% 2 番目と5 番目は 40% 3 番目と4 番目は 10% アニメーション名 shade1 に対応するタイムライン (@keyframes) を指定します 60%~70% で文字の色を color: transparent;( 透明 ) から color: orange;( オレンジ色 ) へ変化させ文字の影を text-shadow: -10px 0px 30px rgba(255,165,0,1.0), 10px 0px 30px rgba(255,165,0,1.0); ( オレンジ色で不透明 ) から text-shadow: 0px 0px 0px rgba(255,165,0,0.0);( オレンジ色で透明 ) へ変化させますその際に 60% でイージングを animation-timing-function: ease-in; で指定し ease-in shade1 { 0% { color: transparent; text-shadow: -10px 0px 30px rgba(255,165,0,1.0), 10px 0px 30px rgba(255,165,0,1.0); 60% { animation-timing-function: ease-in; color: transparent; text-shadow: -10px 0px 30px rgba(255,165,0,1.0), 10px 0px 30px rgba(255,165,0,1.0); 70% { color: orange; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 100% shade1 { 0% { color: transparent; text-shadow: -10px 0px 30px rgba(255,165,0,1.0), 10px 0px 30px rgba(255,165,0,1.0); 60% { -webkit-animation-timing-function: ease-in; color: transparent; text-shadow: -10px 0px 30px rgba(255,165,0,1.0), 10px 0px 30px rgba(255,165,0,1.0); 70% { color: orange; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 100% { 同じように 2 番目の span 要素から 6 番目の span 要素について記述します 1 番目の span 要素と違うところは文字の色と文字の影を変化させるタイミングと影の方向です次のように指定します span 要素アニメーション名文字と影を変化影の方向の順番させるタイミング 1 番目 shade1 60%~70% 文字の左方向 2 番目 shade2 40%~65% 文字の左方向 3 番目 shade3 10%~60% 文字の左方向 40

41 4 番目 shade4 10%~60% 文字の右方向 5 番目 shade5 40%~65% 文字の右方向 6 番目 shade6 60%~70% 文字の右方向イージングの指定は次のタイミングで animation-timing-function: ease-in; で指定します 1 番目と6 番目は 60% 2 番目と5 番目は 40% 3 番目と4 番目は 10% 41

サンプル CSS13 右端からぼやけた文字がはっきりと見えて左側へ寄ってくるアニメーション TitleAnime13 の説明 HTML の記述 (TitleAnime13.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!

42 サンプル CSS13 右端からぼやけた文字がはっきりと見えて左側へ寄ってくるアニメーション TitleAnime13 の説明 HTML の記述 (TitleAnime13.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 の div 要素の中に span 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime13</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime13.css"> </head> <body> 右端からぼやけた文字がはっきりと見えて左側へ寄ってくる <div id="stage"> <div id="div1"> タ イ ト ル 文 字 </body> </html> CSS の記述 (TitleAnime13.css) 先ずアニメーションが動く #stage の記述をします背景色を background-color: #000000; ( 黒色 ) で指定します #stage { width: 670px; height: 150px; background-color: #000000; position: relative; 42

43 #div1 ボックスを記述します位置は top: 0px; left: 0px;(#stage ボックスの左上端を基準とした位置 ) で指定します width: 670px; height: 150px; で指定します overflow: hidden; を指定します #div1 { top: 0px; left: 0px; width: 670px; height: 150px; position: absolute; overflow: hidden; #div1 ボックスの子要素の span 要素の共通のプロパティと値をまとめて記述します位置は top: 0px; left: 680px;(# div1 ボックスの左上端を基準とした位置 ) で指定します text-align: center; でテキストのフォントを font: bold 120px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: orange;( オレンジ色 ) で指定します #div1 span { top: 0px; left: 680px; text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: orange; position: absolute; 1 番目の span 要素を記述しますアニメーションの指定は文字の位置を移動させるアニメーションとぼやけた文字をはっきりした文字に変化させるアニメーションを指定します文字の位置を移動させるアニメーションはアニメーション名を char1anime 実行時間を 5s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定しますぼやけた文字をはっきりした文字に変化させるアニメーションはアニメーション名を shade1 実行時間を 5s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #div1 > span:nth-child(1) { animation: char1anime 5s linear 0s infinite normal, shade1 5s linear 0s infinite normal; -webkit-animation: char1anime 5s linear 0s infinite normal, shade1 5s linear 0s infinite normal; 43

44 同じように2 番目の span 要素から6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名です次のように指定します span 要素の順番文字を移動させるはっきりした文字に変化アニメーション名させるアニメーション名 1 番目 char1anime shade1 2 番目 char2anime shade2 3 番目 char3anime shade3 4 番目 char4anime shade4 5 番目 char5anime shade5 6 番目 char6anime shade6 アニメーション名 char1anime に対応するタイムライン (@keyframes) を指定します 10% ~50% で left: 680px; から left: 16px; へ移動させますその際に 10% でイージングを animation-timing-function: ease-out; で指定し ease-out char1anime { 0% { left: 680px; 10% { left: 680px; animation-timing-function: ease-out; 50% { left: 16px; 100% { left: char1anime { 0% { left: 680px; 10% { left: 680px; -webkit-animation-timing-function: ease-out; 50% { left: 16px; 100% { left: 16px; 同じように 2 番目の span 要素から 6 番目の span 要素について記述します 1 番目の span 要素と違うところはアニメーション名と文字を移動させるタイミング移動させる方向と移動距離です次のように指定します span 要素アニメー文字を移動させる移動させるの順番ション名タイミング距離 1 番目 char1anime 10%~50% left: 680px; left: 16px; 2 番目 char2anime 22.5%~55% left: 680px; left: 110px; 3 番目 char3anime 35%~60% left: 680px; left: 210px; 4 番目 char4anime 45%~65% left: 680px; left: 290px; 5 番目 char5anime 50%~70% left: 680px; left: 410px; 44

45 6 番目 char6anime 60%~75% left: 680px; left: 530px; イージングの指定は次のタイミングで animation-timing-function: ease-out; で指定します 1 番目は 10% 2 番目は 22.5% 3 番目は 35% 4 番目は 45% 5 番目は 50% 6 番目は 60% アニメーション名 shade1 に対応するタイムライン (@keyframes) を指定します 10%~60% で文字の色を color: transparent;( 透明 ) から color: orange;( オレンジ色 ) へ変化させ文字の影を text-shadow: 10px 0px 80px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0); ( オレンジ色で不透明 ) から text-shadow: 0px 0px 0px rgba(255,165,0,0.0);( オレンジ色で透明 ) へ変化させますその際に 10% でイージングを animation-timing-function: ease-in; で指定し ease-in shade1 { 0% { color: transparent; text-shadow: 10px 0px 80px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0); 10% { animation-timing-function: ease-in; color: transparent; text-shadow: 10px 0px 80px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0); 60% { color: orange; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 100% shade1 { 0% { color: transparent; text-shadow: 10px 0px 80px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0); 10% { -webkit-animation-timing-function: ease-in; color: transparent; text-shadow: 10px 0px 80px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0); 60% { color: orange; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 100% { 同じように 2 番目の span 要素から 6 番目の span 要素について記述します 1 番目の span 要素と違うところは文字の色と文字の影を変化させるタイミングと影の右方向の幅です次のように指定します span 要素アニメーション名文字と影を変化影の右方向の幅の順番させるタイミング 45

46 1 番目 shade1 10%~60% 80px 2 番目 shade2 22.5%~65% 70px 3 番目 shade3 35%~70% 60px 4 番目 shade4 45%~75% 50px 5 番目 shade5 50%~80% 40px 6 番目 shade6 60%~85% 30px イージングの指定は次のタイミングで animation-timing-function: ease-in; で指定します 1 番目は 10% 2 番目は 22.5% 3 番目は 35% 4 番目は 45% 5 番目は 50% 6 番目は 60% 46

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ 1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにしてみましょう radial-gradient と repeating-radial-gradient の仕様は別本 Transition を使いこなす編の 1238-1 円形グラデーション Radial Gradation