© 2016 電脳 Papa 1
1334 テキストのアニメーション
animation プロパティを使ってテキストに係わるプロパティのアニメーションを作ってみ
ましょう。
（注）Safari（webkit 系ブラウザ）と Chrome（webkit にも対応）は、テキストの輪郭や色
を、-webkit-text-stroke-width、-webkit-text-stroke-color、-webkit-text-fill-color
のプロパティで描くことができますが、W3C 仕様には同様の機能がないので、webkit 系以
外のブラウザ（Firefox、IE など）はテキストの色を color プロパティで指定するだけにな
ります。
本章のサンプルＣＳＳには text-stroke-width、
text-stroke-color および text-fill-color
プロパティを指定していますが、実際には機能しません。テキストの輪郭は多用されそう
ですが、残念ながら現在の W3C 仕様ではできません。将来、仕様に取り込まれるかもしれ
ません（2015 年 12 月 7 日現在）
。
●テキストの回転および傾斜のアニメーション
サンプルＣＳＳ１
© 2016 電脳 Papa 2
【MovingTextsAnime1 の説明】
〔HTML の記述 （MovingTextsAnime1.html）
〕
id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや
テキストを記述します。
id 属性 div1 の div 要素から id 属性 div3 の div 要素の中にそれぞれテキストを記述します。
〔CSS の記述（MovingTextsAnime1.css）
〕
先ず、アニメーションが動く#stage の記述をします。
<!DOCTYPE html> <html> <head> <title>MovingTextsAnime1</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="MovingTextsAnime1.css"> </head>
<body>
<p>■テキストをアニメーションで動かす。（１）</p> <div id="stage">
<div id="div1">Hello!! CSS3</div> <div id="div2">Hello!! HTML5</div> <div id="div3">CSS3 Animation</div> </div> </body> </html> #stage { width: 700px; height: 500px; border: 1px solid #000000; position: relative; }
© 2016 電脳 Papa 3
１．テキストを、X 軸を中心にして回転させる
#div1 ボックスを記述します。位置は top: 30px; left: 150px;（#stage ボックスの左上端
を基準とした位置）で指定します。width と height は指定しません。（width と height を
指定すると、テキストを回転させるときの回転軸（変形の起点）がテキストの中心からず
れるので、transform-origin プロパティで変形の起点を調整しなければなりません。
）
アニメーション名を TextAnime1、実行時間を 10s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は alternate で指定します。
アニメーション名 TextAnime1 に対応するタイムライン（@keyframes）を指定します。テキ
ストが回転する際に奥行きを出すために transform: perspective(300px)を指定します。
rotateX(360deg);で、X 軸の正の方向から見て時計回りに 360 度回転（１回転）させます。
animation の実行方向を alternate で指定しているので、戻りは逆の動きになります。
#div1 { top: 30px; left: 150px; text-align: center; color: #6699FF;font: bold 72px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; position: absolute;
animation: TextAnime1 10s linear 0s infinite alternate;
-webkit-animation: TextAnime1 10s linear 0s infinite alternate; }
@keyframes TextAnime1 {
0% { transform: perspective(300px) rotateX(0deg); } 100% { transform: perspective(300px) rotateX(360deg); } }
@-webkit-keyframes TextAnime1 {
0% { -webkit-transform: perspective(300px) rotateX(0deg); } 100% { -webkit-transform: perspective(300px) rotateX(360deg); } }
© 2016 電脳 Papa 4
２．テキストを、Z 軸を中心にして回転させる
#div2 ボックスを記述します。位置は top: 220px; left: 140px;（#stage ボックスの左上
端を基準とした位置）で指定します。width と height は指定しません。（width と height
を指定すると、テキストを回転させるときの回転軸（変形の起点）がテキストの中心から
ずれるので、transform-origin プロパティで変形の起点を調整しなければなりません。
）
アニメーション名を TextAnime2、実行時間を 5s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は normal で指定します。
アニメーション名 TextAnime2 に対応するタイムライン（@keyframes）を指定します。水平
状態から rotateZ(30deg);で時計回りに 30 度回転させ、また水平に戻し、rotateZ(-30deg);
で反時計回りに 30 度回転させ、また水平に戻すという繰り返しになります。
#div2 { top: 220px; left: 140px; text-align: center; color: #00FF99;font: bold 68px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; position: absolute;
animation: TextAnime2 5s linear 0s infinite normal;
-webkit-animation: TextAnime2 5s linear 0s infinite normal; } @keyframes TextAnime2 { 0% { transform: rotateZ(0deg); } 25% { transform: rotateZ(30deg); } 50% { transform: rotateZ(0deg); } 75% { transform: rotateZ(-30deg); } 100% { transform: rotateZ(0deg); } } @-webkit-keyframes TextAnime2 { 0% { -webkit-transform: rotateZ(0deg); } 25% { -webkit-transform: rotateZ(30deg); }
© 2016 電脳 Papa 5
３．テキストを傾斜させる
#div3 ボックスを記述します。位置は top: 400px; left: 100px;（#stage ボックスの左上
端を基準とした位置）で指定します。width と height は指定しません。（width と height
を指定すると、テキストを傾斜させるときの変形の起点がテキストの中心からずれるので、
transform-origin プロパティで変形の起点を調整しなければなりません。
）
アニメーション名を TextAnime3、実行時間を 10s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は normal で指定します。
アニメーション名 TextAnime3 に対応するタイムライン（@keyframes）を指定します。水平
状態から skewX(60deg);で左方向へ 60 度傾斜させ、また水平に戻し、skewX(-60deg);で右
方向へ 60 度傾斜させ、また水平に戻すという繰り返しになります。
50% { -webkit-transform: rotateZ(0deg); } 75% { -webkit-transform: rotateZ(-30deg); } 100% { -webkit-transform: rotateZ(0deg); } } #div3 { top: 400px; left: 100px; text-align: center; color: #FF9900;font: bold 64px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; position: absolute;
animation: TextAnime3 10s linear 0s infinite normal;
-webkit-animation: TextAnime3 10s linear 0s infinite normal; } @keyframes TextAnime3 { 0% { transform: skewX(0deg); } 25% { transform: skewX(60deg); } 50% { transform: skewX(0deg); } 75% { transform: skewX(-60deg); } 100% { transform: skewX(0deg); } }
© 2016 電脳 Papa 6
●テキストのフォントサイズ、文字間隔、ワード間隔、インデント間隔のアニメーション
〔webkit 系〕
〔W3C 仕様〕
注：「Congratulations!」、「Believe or not, it's up to you.」、「あいうえお～」のテキ
@-webkit-keyframes TextAnime3 { 0% { -webkit-transform: skewX(0deg); } 25% { -webkit-transform: skewX(60deg); } 50% { -webkit-transform: skewX(0deg); } 75% { -webkit-transform: skewX(-60deg); } 100% { -webkit-transform: skewX(0deg); } }サンプルＣＳＳ２
© 2016 電脳 Papa 7
ストについては、Safari（webkit 系ブラウザ）と Chrome（webkit にも対応）は、テキスト
の輪郭を-webkit-text-stroke-width、-webkit-text-stroke-color、-webkit-text-fill-
color のプロパティで描くことができますが、W3C 仕様には同様の機能がないので、webkit
系以外のブラウザ（Firefox、IE など）はテキストの輪郭を描くことができず、テキストの
色 を color プ ロ パ テ ィ で 指 定 す る だ け に な り ま す 。 本 章 の サ ン プ ル Ｃ Ｓ Ｓ に は
text-stroke-width、text-stroke-color および text-fill-color プロパティを指定してい
ますが、実際には機能しません。
【MovingTextsAnime2 の説明】
〔HTML の記述 （MovingTextsAnime2.html）
〕
id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや
テキストを記述します。
id 属性 div1 の div 要素から id 属性 div4 の div 要素の中にそれぞれテキストを記述します。
〔CSS の記述（MovingTextsAnime2.css）
〕
先ず、アニメーションが動く#stage の記述をします。
#stage {width: 700px; height: 500px; border: 1px solid black; position: relative; } <!DOCTYPE html> <html> <head> <title>MovingTextsAnime2</title> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="MovingTextsAnime2.css"> </head>
<body>
<p>■テキストをアニメーションで動かす。（２）</p> <div id="stage">
<div id="div1">Hello!! CSS3</div> <div id="div2">Congratulations!</div>
<div id="div3">Believe or not, it's up to you.</div>
<div id="div4">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむ めもやヰゆゑよわをん</div>
</div> </body> </html>
© 2016 電脳 Papa 8
１．テキストのフォントサイズを変更する
#div1 ボックスを記述します。位置は top: 40px; left: 180px;（#stage ボックスの左上端
を基準とした位置）で指定します。width と height は指定しません。
アニメーション名を TextAnime1、実行時間を 4s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は alternate で指定します。
アニメーション名 TextAnime1 に対応するタイムライン（@keyframes）を指定します。テキ
ストの色を color: #00FFFF;（水色）から color: #FF00FF;（紫色）へ変化させます。フォ
ントサイズを 64px から 92px へ変化させます。テキストの中心の位置を動かさないために
top: 40px; left: 180px;から top: 20px; left: 100px;へ変化させます。animation の実
行方向を alternate で指定しているので、戻りは逆の動きになります。
#div1 {
top: 40px; left: 180px; text-align: center; color: #00FFFF;
font: bold 64px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; position: absolute;
animation: TextAnime1 4s linear 0s infinite alternate;
-webkit-animation: TextAnime1 4s linear 0s infinite alternate; }
@keyframes TextAnime1 {
0% { color: #00FFFF; font-size: 64px; top: 40px; left: 180px; } 20% { color: #00FFFF; font-size: 64px; top: 40px; left: 180px; } 80% { color: #FF00FF; font-size: 92px; top: 20px; left: 100px; } 100% { color: #FF00FF; font-size: 92px; top: 20px; left: 100px; } }
@-webkit-keyframes TextAnime1 {
0% { color: #00FFFF; font-size: 64px; top: 40px; left: 180px; } 20% { color: #00FFFF; font-size: 64px; top: 40px; left: 180px; } 80% { color: #FF00FF; font-size: 92px; top: 20px; left: 100px; } 100% { color: #FF00FF; font-size: 92px; top: 20px; left: 100px; } }
© 2016 電脳 Papa 9
２．テキストの文字間隔（letter-spacing）を変更する
#div2 ボックスを記述します。位置は top: 130px; left: 120px;（#stage ボックスの左上
端を基準とした位置）
で指定します。
width と height は指定しません。
フォントを font: bold
italic 54px Courier New;で指定し、-webkit-text-stroke-width: 2px;、-webkit-text-
stroke-color: #000000;、-webkit-text-fill-color: #FFFFFF;で黒色の縁取り文字にして、
text-shadow: 2px 2px 0px #000000;で影をつけます。文字間隔を letter-spacing: -5px;
で指定して文字が少し重なるようにします。
アニメーション名を TextAnime2、実行時間を 3s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は alternate で指定します。
アニメーション名 TextAnime2 に対応するタイムライン（@keyframes）を指定します。テキ
ストの縁取りの色を-webkit-text-stroke-color: #000000;（黒色）から-webkit-text-
stroke-color: #FF0000;（赤色）へ変化させます。文字間隔を letter-spacing: -5px;から
letter-spacing: 10px;へ変化させます。テキストの中心の位置を動かさないために left:
#div2 { top: 130px; left: 120px; text-align: center; color: #000000;font: bold italic 54px Courier New; text-stroke-width: 2px; text-stroke-color: #000000; text-fill-color: #FFFFFF; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #000000; -webkit-text-fill-color: #FFFFFF; letter-spacing: -5px; text-shadow: 2px 2px 0px #000000; position: absolute;
animation: TextAnime2 3s linear 0s infinite alternate;
-webkit-animation: TextAnime2 3s linear 0s infinite alternate; }
© 2016 電脳 Papa 10
120px;から left: 20px;へ変化させます。animation の実行方向を alternate で指定してい
るので、戻りは逆の動きになります。
３．テキストのワード間隔（word-spacing）を変更する
#div3 ボックスを記述します。位置は top: 220px; left: 100px;（#stage ボックスの左上
端を基準とした位置）
で指定します。
width と height は指定しません。
フォントを font: bold
38px Georgia;で指定し、-webkit-text-stroke-width: 2px;、-webkit-text-stroke-color:
#000000;、-webkit-text-fill-color: yellow;で黒色の縁取りの黄色い文字にします。ワ
ード間隔を word-spacing: -10px;で指定しワード間の隙間がないようにします。
アニメーション名を TextAnime3、実行時間を 1s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は alternate で指定します。
@keyframes TextAnime2 {0% { left: 120px; text-stroke-color: #000000; letter-spacing: -5px; text-shadow: 2px 2px 0px #000000; color: #000000; }
20% { left: 120px; text-stroke-color: #000000; letter-spacing: -5px; text-shadow: 2px 2px 0px #000000; color: #000000; }
80% { left: 20px; text-stroke-color: #FF0000; letter-spacing: 10px; text-shadow: 2px 2px 0px #FF0000; color: #FF0000; }
100% { left: 20px; text-stroke-color: #FF0000; letter-spacing: 10px; text-shadow: 2px 2px 0px #FF0000; color: #FF0000; }
}
@-webkit-keyframes TextAnime2 {
0% { left: 120px; -webkit-text-stroke-color: #000000; letter-spacing: -5px; text-shadow: 2px 2px 0px #000000; }
20% { left: 120px; -webkit-text-stroke-color: #000000; letter-spacing: -5px; text-shadow: 2px 2px 0px #000000; }
80% { left: 20px; -webkit-text-stroke-color: #FF0000; letter-spacing: 10px; text-shadow: 2px 2px 0px #FF0000; }
100% { left: 20px; -webkit-text-stroke-color: #FF0000; letter-spacing: 10px; text-shadow: 2px 2px 0px #FF0000; }
© 2016 電脳 Papa 11
アニメーション名 TextAnime3 に対応するタイムライン（@keyframes）を指定します。テキ
ス ト の 色 を -webkit-text-fill-color: yellow; （ 黄 色 ） か ら -webkit-text-fill-color:
deepskyblue;（濃い空色）へ変化させます。ワード間隔を word-spacing: -10px;から
word-spacing: 15px;へ変化させます。テキストの中心の位置を動かさないために left:
100px;から left: 30px;へ変化させます。animation の実行方向を alternate で指定してい
るので、戻りは逆の動きになります。
#div3 {
top: 220px; left: 100px; text-align: center; font: bold 38px Georgia; color: yellow; text-stroke-width: 2px; text-stroke-color: #000000; text-fill-color: yellow; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #000000; -webkit-text-fill-color: yellow; word-spacing: -10px; position: absolute;
animation: TextAnime3 1s linear 0s infinite alternate;
-webkit-animation: TextAnime3 1s linear 0s infinite alternate; }
@keyframes TextAnime3 {
0% { left: 100px; text-fill-color: yellow; word-spacing: -10px; color: yellow; }
100% { left: 30px; text-fill-color: deepskyblue; word-spacing: 15px; color: deepskyblue; }
}
@-webkit-keyframes TextAnime3 {
0% { left: 100px; -webkit-text-fill-color: yellow; word-spacing: -10px; } 100% { left: 30px; -webkit-text-fill-color: deepskyblue; word-spacing: 15px; } }
© 2016 電脳 Papa 12
４．テキストのインデント間隔（text-indent）を変更する
#div4 ボックスを記述します。位置は top: 300px; left: 40px;（#stage ボックスの左上端
を基準とした位置）で指定します。width と height は width: 600px; height: 170px;で指
定します。背景を background-color: #CCFFCC;（薄緑色）で指定します。フォントを font:
bold 42px " Ｍ Ｓ Ｐ ゴ シ ッ ク ", Osaka, " ヒ ラ ギ ノ 角 ゴ Pro", Verdana; で 指 定 し 、
-webkit-text-stroke-width: 1px;、-webkit-text-stroke-color: #000000;、-webkit-text-
fill-color: hotpink;で黒色の縁取りのピンク色文字にします。line-height: 42px;で指
定して webkit 系ブラウザと mozilla 系ブラウザの行間を合わせます。テキストインデント
を text-indent: 0%;で指定し先頭文字の字下げがないようにします。
アニメーション名を TextAnime4、実行時間を 10s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は alternate で指定します。
#div4 { top: 300px; left: 40px; width: 600px; height: 170px; background-color: #CCFFCC; align: center; color: hotpink;font: bold 42px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: hotpink;
text-stroke-width: 1px; text-stroke-color: #000000; text-fill-color: hotpink;
© 2016 電脳 Papa 13
アニメーション名 TextAnime4 に対応するタイムライン（@keyframes）を指定します。テキ
ス ト の 色 を -webkit-text-fill-color: yellow; （ 黄 色 ） か ら -webkit-text-fill-color:
deepskyblue;（濃い空色）へ変化させます。テキストインデントを text-indent: 0%;から
text-indent: 80%;（１行目の先頭から 80%の空間を字下げさせます。animation の実行方
向を alternate で指定しているので、戻りは逆の動きになります。
@keyframes TextAnime4 { 0% { text-indent: 0%; } 100% { text-indent: 80%; } } @-webkit-keyframes TextAnime4 { 0% { text-indent: 0%; } 100% { text-indent: 80%; } } -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #000000; -webkit-text-fill-color: hotpink; line-height: 42px; /* webkit 系ブラウザと他のブラウザの行間を合わせる */ text-indent: 0%; position: absolute;animation: TextAnime4 10s linear 0s infinite alternate;
-webkit-animation: TextAnime4 10s linear 0s infinite alternate; }
© 2016 電脳 Papa 14
●テキストが円周に沿って移動するアニメーション
〔webkit 系〕 〔W3C 仕様〕
注：円の周囲を回るテキストについては、Safari（webkit 系ブラウザ）と Chrome（webkit
にも対応）は、テキストの輪郭を-webkit-text-stroke-width、-webkit-text-stroke-color、
-webkit-text-fill-color のプロパティで描くことができますが、W3C 仕様には同様の機能
がないので、webkit 系以外のブラウザ（Firefox、IE など）はテキストの輪郭を描くこと
ができず、テキストの色を color プロパティで指定するだけになります。本章のサンプル
ＣＳＳには text-stroke-width、text-stroke-color および text-fill-color プロパティを
指定していますが、実際には機能しません。
【CharRotateAnime の説明】
〔HTML の記述 （CharRotateAnime.html）
〕
id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや
テキストを記述します。
id 属性 div1 の div 要素の中に span 要素でテキストを A から L まで記述をします。id 属性
circle の div 要素を記述します。
<!DOCTYPE html> <html> <head> <title>CharRotateAnime</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="CharRotateAnime.css"> </head>
© 2016 電脳 Papa 15
〔CSS の記述（CharRotateAnime.css）
〕
先ず、アニメーションが動く#stage の記述をします。
#circle ボックスを記述します。位置は top: 75px; left: 75px;（#stage ボックスの左上
端を基準とした位置）
、width: 170px; height: 170px; で指定し#stage ボックスの中央に
置きます。border-radius: 50%;で円形にします。背景色を background-color: lightgreen;
（薄緑色）にします。
#div1 ボックスを記述します。位置は top: 10px; left: 10px;（#stage ボックスの左上端
を基準とした位置）
、width: 300px; height: 300px;で指定し#stage ボックスの中央に置き
ます。背景色を background-color: #6699FF;（空色）にします。
#stage { width: 320px; height: 320px; background-color: black; position: relative; } #circle { top: 75px; left: 75px; width: 170px; height: 170px; border-radius: 50%; background-color: lightgreen; position: absolute; } <body> <p>■円周に沿って文字を移動させる。</p> <div id="stage"> <div id="div1"> <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span> <span>F</span><span>G</span><span>H</span><span>I</span><span>J</span> <span>K</span><span>L</span> </div> <div id="circle"></div> </div> </body> </html>© 2016 電脳 Papa 16
#div1 ボックスの子要素の span 要素の共通のプロパティと値をまとめて記述します。位置
は top: 5px; left: 120px;（# div1 ボックスの左上端を基準とした位置）で指定します。
width: 60px; height: 60px;で指定します。フォントを font: bold 60px "ＭＳ Ｐゴシッ
ク", Osaka, "ヒラギノ角ゴ Pro", Verdana;で指定し、-webkit-text-stroke-width: 2px;、
-webkit-text-stroke-color: mediumseagreen;、-webkit-text-fill-color: yellow;でシ
ーグリーン色の縁取りの黄色文字にします。text-shadow: 5px 5px 5px #666666;で影を付
けます。line-height: 60px;で指定して webkit 系ブラウザと Mozilla 系ブラウザの行間を
合わせます。transform-origin: center 145px;と指定し、テキスト文字が円周の外に位置
し、変化の起点が円の中心にくるようにします。
#div1 ボックスの１番目の span 要素の記述をします。transform: rotateZ(0deg);で指定し、
A の文字を円周の一番上に置きます。
アニメーション名を char1anime、実行時間を 15s、イージングを linear、開始待ち時間を
#div1 { top: 10px; left: 10px; width: 300px; height: 300px; background-color: #6699FF; position: absolute; } #div1 > span { top: 5px; left: 120px; width: 60px; height: 60px; text-align: center;font: bold 60px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: yellow; text-stroke-width: 2px; text-stroke-color: mediumseagreen; text-fill-color: yellow; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: mediumseagreen; -webkit-text-fill-color: yellow; text-shadow: 5px 5px 5px #666666; line-height: 60px; /* webkit 系ブラウザと他のブラウザの行間を合わせる */ transform-origin: center 145px; -webkit-transform-origin: center 145px; position: absolute; }
© 2016 電脳 Papa 17
0s、繰り返しを infinite、実行方向は normal で指定します。
アニメーション名 char1anime に対応するタイムライン（@keyframes）を指定します。
transform: rotateZ(0deg);から transform: rotateZ(-360deg);で、反時計回りに 360 度回
転（１回転）させます。
#div1 ボックスの２番目の span 要素の記述をします。transform: rotateZ(30deg);で指定
し、B の文字を円の中心を起点として 30 度傾いた位置に置きます。
アニメーション名を char2anime、実行時間を 15s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は normal で指定します。
アニメーション名 char1anime に対応するタイムライン（@keyframes）を指定します。
transform: rotateZ(30deg);から transform: rotateZ(-330deg);で、反時計回りに 360 度
回転（１回転）させます。
#div1 > span:nth-child(1) { transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
animation: char1anime 15s linear 0s infinite normal;
-webkit-animation: char1anime 15s linear 0s infinite normal; } @keyframes char1anime { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); } } @-webkit-keyframes char1anime { 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(-360deg); } } #div1 > span:nth-child(2) { transform: rotateZ(30deg); -webkit-transform: rotateZ(30deg);
animation: char2anime 15s linear 0s infinite normal;
-webkit-animation: char2anime 15s linear 0s infinite normal; } @keyframes char2anime { 0% { transform: rotateZ(30deg); } 100% { transform: rotateZ(-330deg); } } @-webkit-keyframes char2anime { 0% { -webkit-transform: rotateZ(30deg); } 100% { -webkit-transform: rotateZ(-330deg); } }
© 2016 電脳 Papa 18
以降、#div1 ボックスの３番目の span 要素から１２番目の span 要素までの記述をします。
transform: rotateZ(NNNdeg);は 30 度ずつ加算した値で指定し、文字を円の中心を起点と
して 30 度ずつ加算された角度分傾いた位置に置きます。
アニメーション名を char3anime から char12anime で指定し、実行時間を 15s、イージング
を linear、開始待ち時間を 0s、繰り返しを infinite、実行方向は normal で指定します。
アニメーション名 char3anime から char12anime に対応するタイムライン（@keyframes）を
指定します。transform: rotateZ(NNNdeg);から transform: rotateZ(-MMMdeg);（MMM は 360
から NNN を引いた値）で、反時計回りに 360 度回転（１回転）させます。
#div1 > span:nth-child(3) { transform: rotateZ(60deg);
-webkit-transform: rotateZ(60deg);
animation: char3anime 15s linear 0s infinite normal;
-webkit-animation: char3anime 15s linear 0s infinite normal; } @keyframes char3anime { 0% { transform: rotateZ(60deg); } 100% { transform: rotateZ(-300deg); } } @-webkit-keyframes char3anime { 0% { -webkit-transform: rotateZ(60deg); } 100% { -webkit-transform: rotateZ(-300deg); } } #div1 > span:nth-child(12) { transform: rotateZ(330deg); -webkit-transform: rotateZ(330deg);
animation: char12anime 15s linear 0s infinite normal;
-webkit-animation: char12anime 15s linear 0s infinite normal; } @keyframes char12anime { 0% { transform: rotateZ(330deg); } 100% { transform: rotateZ(-30deg); } } @-webkit-keyframes char12anime { 0% { -webkit-transform: rotateZ(330deg); } 100% { -webkit-transform: rotateZ(-30deg); } }
・
・
・
・
・
・
© 2016 電脳 Papa 19
●テキストが飛び交うアニメーション
【FlyingTextsAnime の説明】
〔HTML の記述 （FlyingTextsAnime.html）
〕
id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや
テキストを記述します。
id 属性 char1A の div 要素の中に id 属性 char1B の div 要素を記述し、
id 属性 char1B の div
要素の中にテキストを記述します。同じように、id 属性 char2A から id 属性 char9A の div
要素の中に id 属性 char2B から id 属性 char9B の div 要素と、テキストを記述します。
〔CSS の記述（FlyingTextsAnime.css）
〕
<!DOCTYPE html> <html> <head> <title>FlyingTextsAnime</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="FlyingTextsAnime.css"> </head>
<body>
<p>■文字が飛び交う。</p> <div id="stage">
<div id="char1A"><div id="char1B">あ</div></div> <div id="char2A"><div id="char2B">Ａ</div></div> <div id="char3A"><div id="char3B">い</div></div> <div id="char4A"><div id="char4B">Ｂ</div></div> <div id="char5A"><div id="char5B">う</div></div> <div id="char6A"><div id="char6B">Ｃ</div></div> <div id="char7A"><div id="char7B">１</div></div> <div id="char8A"><div id="char8B">２</div></div> <div id="char9A"><div id="char9B">３</div></div> </div>
</body> </html>
サンプルＣＳＳ４
© 2016 電脳 Papa 20
先ず、アニメーションが動く#stage の記述をします。overflow: hidden;を指定します。
アニメーション名を backAnime、実行時間を 20s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は alternate で指定します。
アニメーション名 backAnime に対応するタイムライン（@keyframes）を指定します。背景
色を background-color: #000000;（黒色）から 25%ごとに background-color: #FF0000;（赤
色 ）、 background-color: #00FF00; （ 緑 色 ）、 background-color: #0000FF; （ 青 色 ）、
background-color: #FF00FF;（紫色）に変化させます。させます。animation の実行方向を
alternate で指定しているので、戻りは逆の動きになります。
#char1A ボックスから#char9A ボックスと#char1B ボックスから#char9B ボックスの記述を
しますが、#char1A ボックスから#char9A ボックスはテキスト文字の横方向の動き、#char1B
ボックスから#char9B ボックスはテキスト文字の縦方向の動きと文字の回転や文字の透明
度を指定します。
#char1A ボックスの記述をします。位置は top: 0px; left: 50px;（#stage ボックスの左上
端を基準とした位置）で指定します。width と height は指定しません。
アニメーション名を anime1A、実行時間を 7s、イージングを ease-in、開始待ち時間を 0s、
#stage { width: 600px; height: 400px; background-color: #000000; position: relative; overflow: hidden;animation: backAnime 20s linear 0s infinite alternate;
-webkit-animation: backAnime 20s linear 0s infinite alternate; } @keyframes backAnime { 0% { background-color: #000000; } 25% { background-color: #FF0000; } 50% { background-color: #00FF00; } 75% { background-color: #0000FF; } 100% { background-color: #FF00FF; } } @-webkit-keyframes backAnime { 0% { background-color: #000000; } 25% { background-color: #FF0000; } 50% { background-color: #00FF00; } 75% { background-color: #0000FF; } 100% { background-color: #FF00FF; } }
© 2016 電脳 Papa 21
繰り返しを infinite、実行方向は alternate で指定します。
アニメーション名 anime1A に対応するタイムライン（@keyframes）を指定します。left:
50px;から left: 620px;に移動させます。
#char1B ボックスの記述をします。top: 500px; left: 0px;（#char1A ボックスの左上端を
基準とした位置）で指定します。ボックスのサイズは width: 256px; height: 256px;で指
定します。テキストのフォントは font: bold 720px "ＭＳ Ｐゴシック", Osaka, "ヒラギ
ノ角ゴ Pro", Verdana;、色は color: yellow;（黄色）で指定します。transform-origin: 30%
20%;で指定し、変化の起点を中心からズラします。
アニメーション名を anime1B、実行時間を 7s、イージングを ease-out、開始待ち時間を 0s、
繰り返しを infinite、実行方向は alternate で指定します。
アニメーション名 anime1B に対応するタイムライン（@keyframes）を指定します。top:
500px; か ら top: 0px; へ 、 font-size: 720px; か ら font-size: 12px; へ 、 transform:
rotateX(0deg) rotateY(0deg) rotateZ(0deg); か ら
transform: rotateX(0deg)
rotateY(360deg) rotateZ(1080deg);、opacity: 1.0;から opacity: 0.5;へ変化させます。
animation の実行方向を alternate で指定しているので、戻りは逆の動きになります。
/* あ ***********************************************************************/ #char1A { top: 0px; left: 50px; position: absolute;animation: anime1A 7s ease-in 0s infinite alternate;
-webkit-animation: anime1A 7s ease-in 0s infinite alternate; } @keyframes anime1A { 0% { left: 50px; } 100% { left: 620px; } } @-webkit-keyframes anime1A { 0% { left: 50px; } 100% { left: 620px; } } #char1B { top: 500px; left: 0px; width: 256px; height: 256px;
font: bold 720px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: yellow; opacity: 1.0; position: absolute; transform-origin: 30% 20%; -webkit-transform-origin: 30% 20%;
© 2016 電脳 Papa 22
同じように#char2A ボックスから#char9A ボックスと#char2B ボックスから#char9B ボック
スの記述をします。
animation: anime1B 7s ease-out 0s infinite alternate;
-webkit-animation: anime1B 7s ease-out 0s infinite alternate; }
@keyframes anime1B {
0% { top: 500px; font-size: 720px; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1.0; }
100% { top: 0px; font-size: 12px; transform: rotateX(0deg) rotateY(360deg) rotateZ(1080deg); opacity: 0.5; }
}
@-webkit-keyframes anime1B {
0% { top: 500px; font-size: 720px; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1.0; }
100% { top: 0px; font-size: 12px; -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(1080deg); opacity: 0.5; } } /* Ａ ***********************************************************************/ #char2A { top: 0px; left: 400px; position: absolute;
animation: anime2A 5s ease-out 0s infinite alternate;
-webkit-animation: anime2A 5s ease-out 0s infinite alternate; } @keyframes anime2A { 0% { left: 400px; } 100% { left: -12px; } } @-webkit-keyframes anime2A { 0% { left: 400px; } 100% { left: -12px; } } #char2B { top: 500px; left: 0px; width: 256px; height: 256px;
font: bold 720px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: pink;
position: absolute; transform-origin: 30% 20%;
-webkit-transform-origin: 30% 20%;
animation: anime2B 5s ease-out 0s infinite alternate;
-webkit-animation: anime2B 5s ease-out 0s infinite alternate; }
© 2016 電脳 Papa 23 @keyframes anime2B {
0% { top: 500px; font-size: 720px; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
100% { top: 0px; font-size: 4px; transform: rotateX(-180deg) rotateY(0deg) rotateZ(-720deg); }
}
@-webkit-keyframes anime2B {
0% { top: 500px; font-size: 720px; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
100% { top: 0px; font-size: 4px; -webkit-transform: rotateX(-180deg) rotateY(0deg) rotateZ(-720deg); } } /* い ***********************************************************************/ #char3A { top: 0px; left: 0px; position: absolute;
animation: anime3A 6s ease-out 0s infinite normal;
-webkit-animation: anime3A 6s ease-out 0s infinite normal; } @keyframes anime3A { 0% { left: 0px; } 100% { left: 600px; } } @-webkit-keyframes anime3A { 0% { left: 0px; } 100% { left: 600px; } } #char3B { top: 0px; left: 0px; width: 50px; height: 512px;
font: bold 12px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: lightgreen;
position: absolute; transform-origin: 30% 20%;
-webkit-transform-origin: 30% 20%;
animation: anime3B 6s ease-in 0s infinite normal;
-webkit-animation: anime3B 6s ease-in 0s infinite normal; }
@keyframes anime3B {
0% { top: 0px; font-size: 12px; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
100% { top: 400px; font-size: 512px; transform: rotateX(0deg) rotateY(360deg) rotateZ(1080deg); }
© 2016 電脳 Papa 24 @-webkit-keyframes anime3B {
0% { top: 0px; font-size: 12px; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
100% { top: 400px; font-size: 512px; -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(1080deg); } } /* Ｂ ***********************************************************************/ #char4A { top: 0px; left: 600px; position: absolute;
animation: anime4A 8s ease-out 0s infinite normal;
-webkit-animation: anime4A 8s ease-out 0s infinite normal; } @keyframes anime4A { 0% { left: 600px; } 100% { left: -150px; } } @-webkit-keyframes anime4A { 0% { left: 600px; } 100% { left: -150px; } } #char4B { top: -50px; left: 0px; width: 256px; height: 256px;
font: bold 12px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: lightblue;
position: absolute; transform-origin: 30% 20%;
-webkit-transform-origin: 30% 20%;
animation: anime4B 8s ease-out 0s infinite normal;
-webkit-animation: anime4B 8s ease-out 0s infinite normal; }
@keyframes anime4B {
0% { top: -50px; font-size: 12px; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
100% { top: 350px; font-size: 256px; transform: rotateX(180deg) rotateY(180deg) rotateZ(-720deg); }
}
@-webkit-keyframes anime4B {
0% { top: -50px; font-size: 12px; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
100% { top: 350px; font-size: 256px; -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(-720deg); }
© 2016 電脳 Papa 25 /* う ***********************************************************************/ #char5A { top: 0px; left: -12px; position: absolute;
animation: anime5A 10s ease-in 0s infinite normal;
-webkit-animation: anime5A 10s ease-in 0s infinite normal; } @keyframes anime5A { 0% { left: -12px; } 100% { left: 600px; } } @-webkit-keyframes anime5A { 0% { left: -12px; } 100% { left: 600px; } } #char5B { top: 388px; left: 0px; width: 12px; height: 12px;
font: bold 12px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: orange;
position: absolute; transform-origin: 30% 20%;
-webkit-transform-origin: 30% 20%;
animation: anime5B 10s ease-in 0s infinite normal;
-webkit-animation: anime5B 10s ease-in 0s infinite normal; }
@keyframes anime5B {
0% { top: 388px; width: 12px; height:12px; font-size: 12px; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { top: 0px; width: 512px; height:512px; font-size: 512px; transform: rotateX(0deg) rotateY(270deg) rotateZ(1080deg); } }
@-webkit-keyframes anime5B {
0% { top: 388px; width: 12px; height:12px; font-size: 12px;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { top: 0px; width: 512px; height:512px; font-size: 512px;
-webkit-transform: rotateX(0deg) rotateY(270deg) rotateZ(1080deg); } } /* Ｃ ***********************************************************************/ #char6A { top: 0px; left: 588px; position: absolute;
© 2016 電脳 Papa 26
animation: anime6A 10s ease-in 0s infinite normal;
-webkit-animation: anime6A 10s ease-in 0s infinite normal; } @keyframes anime6A { 0% { left: 588px; } 100% { left: -400px; } } @-webkit-keyframes anime6A { 0% { left: 588px; } 100% { left: -400px; } } #char6B { top: 388px; left: 0px; width: 12px; height: 12px;
font: bold 12px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: magenta;
position: absolute; transform-origin: 30% 20%;
-webkit-transform-origin: 30% 20%;
animation: anime6B 10s ease-in 0s infinite normal;
-webkit-animation: anime6B 10s ease-in 0s infinite normal; }
@keyframes anime6B {
0% { top: 388px; width: 12px; height:12px; font-size: 12px;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 0.5; } 100% { top: -300px; width: 512px; height:512px; font-size: 512px;
transform: rotateX(360deg) rotateY(0deg) rotateZ(-2160deg); opacity: 1.0; } }
@-webkit-keyframes anime6B {
0% { top: 388px; width: 12px; height:12px; font-size: 12px;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 0.5; } 100% { top: -300px; width: 512px; height:512px; font-size: 512px;
-webkit-transform: rotateX(360deg) rotateY(0deg) rotateZ(-2160deg); opacity: 1.0; } } /* １ ***********************************************************************/ #char7A { top: 0px; left: -400px; position: absolute;
animation: anime7A 8s ease-in-out 0s infinite alternate;
-webkit-animation: anime7A 8s ease-in-out 0s infinite alternate; }
@keyframes anime7A { 0% { left: -400px; }
© 2016 電脳 Papa 27 #char7B {
top: -300px; left: 0px; width: 256px; height: 256px;
font: bold 512px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: cyan;
position: absolute; transform-origin: 30% 20%;
-webkit-transform-origin: 30% 20%;
animation: anime7B 8s ease-in-out 0s infinite alternate;
-webkit-animation: anime7B 8s ease-in-out 0s infinite alternate; }
@keyframes anime7B {
0% { top: -300px; width: 256px; height: 256px; font-size: 720px; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { top: 420px; width: 12px; height:12px; font-size: 12px; transform: rotateX(0deg) rotateY(720deg) rotateZ(720deg); } }
@-webkit-keyframes anime7B {
0% { top: -300px; width: 256px; height: 256px; font-size: 720px; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { top: 420px; width: 12px; height:12px; font-size: 12px;
-webkit-transform: rotateX(0deg) rotateY(720deg) rotateZ(720deg); } } 100% { left: 620px; } } @-webkit-keyframes anime7A { 0% { left: -400px; } 100% { left: 620px; } } /* ２ ***********************************************************************/ #char8A { top: 0px; left: 620px; position: absolute;
animation: anime8A 10s ease-in-out 0s infinite alternate;
-webkit-animation: anime8A 10s ease-in-out 0s infinite alternate; } @keyframes anime8A { 0% { left: 620px; } 50% { left: -50px; } 100% { left: 620px; } } @-webkit-keyframes anime8A { 0% { left: 620px; } 50% { left: -50px; }
© 2016 電脳 Papa 28 #char8B {
top: -50px; left: 0px; width: 256px; height: 256px;
font: bold 256px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: salmon;
position: absolute; transform-origin: 30% 20%;
-webkit-transform-origin: 30% 20%;
animation: anime8B 10s ease-in 0s infinite alternate;
-webkit-animation: anime8B 10s ease-in 0s infinite alternate; }
@keyframes anime8B {
0% { top: -50px; width: 256px; height: 256px; font-size: 256px;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1.0; } 100% { top: 420px; width: 12px; height:12px; font-size: 12px;
transform: rotateX(360deg) rotateY(0deg) rotateZ(1440deg); opacity: 0.5; } }
@-webkit-keyframes anime8B {
0% { top: -50px; width: 256px; height: 256px; font-size: 256px;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1.0; } 100% { top: 420px; width: 12px; height:12px; font-size: 12px;
-webkit-transform: rotateX(360deg) rotateY(0deg) rotateZ(1440deg); opacity: 0.5; } } 100% { left: 620px; } } /* ３ ***********************************************************************/ #char9A { top: 0px; left: -50px; position: absolute;
animation: anime9A 10s ease-in-out 0s infinite alternate;
-webkit-animation: anime9A 10s ease-in-out 0s infinite alternate; } @keyframes anime9A { 0% { left: -50px; } 50% { left: 520px; } 100% { left: -50px; } } @-webkit-keyframes anime9A { 0% { left: -50px; } 50% { left: 520px; } 100% { left: -50px; } }
© 2016 電脳 Papa 29 #char9B {
top: 420px; left: 0px; width: 256px; height: 256px;
font: bold 376px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: silver;
position: absolute; transform-origin: 30% 20%;
-webkit-transform-origin: 30% 20%;
animation: anime9B 10s ease-out 0s infinite alternate;
-webkit-animation: anime9B 10s ease-out 0s infinite alternate; }
@keyframes anime9B {
0% { top: 420px; width: 256px; height: 256px; font-size: 376px;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1.0; } 100% { top: -20px; width: 12px; height:12px; font-size: 12px;
transform: rotateX(0deg) rotateY(720deg) rotateZ(1080deg); opacity: 0.5; } }
@-webkit-keyframes anime9B {
0% { top: 420px; width: 256px; height: 256px; font-size: 376px;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1.0; } 100% { top: -20px; width: 12px; height:12px; font-size: 12px;
-webkit-transform: rotateX(0deg) rotateY(720deg) rotateZ(1080deg); opacity: 0.5; }
