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
<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </head> <body> <p> 文字を順番に見えるようにする </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </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
ジングを ease-in 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します アニメーション名 char1anime に対応するタイムライン (@keyframes) を指定します 見出しの文字を順番に見えるようにするために 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 normal; @keyframes char1anime { 0% { opacity: 0.0; 10% { opacity: 0.0; 20% { opacity: 1.0; 100% { opacity: 1.0; @-webkit-keyframes 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 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime02</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime02.css"> </head> <body> <p> 文字を順番に回転させる </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime02.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 4
#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 normal; @keyframes char1anime { 0% { 10% { transform: rotatez(0deg); 20% { transform: rotatez(360deg); 100% { transform: rotatez(360deg); @-webkit-keyframes 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
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 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime03</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime03.css"> </head> <body> <p> 文字を順番に振動させる </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime03.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 7
#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 normal; @keyframes 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
20% { transform: translate(0px, 0px) rotatez(0deg); 100% { transform: translate(0px, 0px) rotatez(0deg); @-webkit-keyframes 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 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime04</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime04.css"> </head> <body> <p> 左右両端から文字が寄ってくる </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime04.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 10
#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
@keyframes char1anime { 0% { left: -100px; 60% { left: -100px; animation-timing-function: ease-out; 70% { left: 16px; 100% { left: 16px; @-webkit-keyframes 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
サンプル 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> <p> 文字が上や下から寄ってくる </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime05.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 13
#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 normal; @keyframes char1anime { 0% { top: -120px; left: -100px; 14
60% { top: -120px; left: -100px; animation-timing-function: ease-out; 70% { top: 0px; left: 16px; 100% { top: 0px; left: 16px; @-webkit-keyframes 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 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime06</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime06.css"> </head> <body> <p> 両端から文字が回転しながら寄ってくる </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime06.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 16
#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
@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: rotatez(360deg); @-webkit-keyframes 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 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime07</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime07.css"> </head> <body> <p> 文字が上や下から回転しながら寄ってくる </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime07.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 19
#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
@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: rotatez(360deg); @-webkit-keyframes 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);
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 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime08</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime08.css"> </head> <body> <p> 文字が順番に転がってくる </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime08.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #6699FF; ( 濃い空色 ) で指定します #stage { width: 670px; height: 150px; background-color: #6699FF; position: relative; 23
#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
@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: rotatez(360deg); @-webkit-keyframes 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; で指定します
サンプル 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> <p> ネオンサインのように文字を順番に光り始めるようにする </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime09.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #000000; 26
( 黒色 ) で指定します #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
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 プロパティを使用しています */ @keyframes 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 hotpink; @-webkit-keyframes 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
サンプル 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> <p> ネオンサインのように文字を 1 文字ずつ光るようにする </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime10.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #000000; ( 黒色 ) で指定します 29
#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
#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 プロパティを使用しています */ @keyframes 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
@-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
サンプル 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> <p> 文字を順番にグラデーションが流れるようにする </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime11.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #000000; ( 黒色 ) で指定します 33
#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
同じように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;( オレンジ色 ) へ戻します @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; webkit 系も同じ指定にします 35
@-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 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime12</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime12.css"> </head> <body> <p> 両端からぼやけた文字がはっきりと見えて寄ってくる </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime12.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #000000; ( 黒色 ) で指定します #stage { width: 670px; height: 150px; background-color: #000000; position: relative; 37
#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
同じように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 で移動するようにします @keyframes char1anime { 0% { left: -120px; 60% { left: -120px; animation-timing-function: ease-out; 70% { left: 16px; 100% { left: 16px; @-webkit-keyframes 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
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 で変化するようにします @keyframes 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% { @-webkit-keyframes 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
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 要素でテキストを記述します <!DOCTYPE html> <html> <head> <title>titleanime13</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime13.css"> </head> <body> <p> 右端からぼやけた文字がはっきりと見えて左側へ寄ってくる </p> <div id="stage"> <div id="div1"> <span> タ </span><span> イ </span><span> ト </span><span> ル </span><span> 文 </span><span> 字 </span> </body> </html> CSS の記述 (TitleAnime13.css) 先ず アニメーションが動く #stage の記述をします 背景色を background-color: #000000; ( 黒色 ) で指定します #stage { width: 670px; height: 150px; background-color: #000000; position: relative; 42
#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
同じように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 で移動するようにします @keyframes char1anime { 0% { left: 680px; 10% { left: 680px; animation-timing-function: ease-out; 50% { left: 16px; 100% { left: 16px; @-webkit-keyframes 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
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 で変化するようにします @keyframes 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% { @-webkit-keyframes 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
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