MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し中につぎの記述をします id 属性 div2

(1)

1343 アニメーションを連続させる

複数のアニメーションを連続して適用するためには、つぎの２つの方法があります。

１．複数の連続したアニメーション全体を繰り返さずに１回だけ動かしたい場合は、待ち

時間を利用して複数のアニメーションを指定します。

２．複数の連続したアニメーション全体を繰り返し動かしたい場合は、アニメーション全

体を 100%として、各アニメーションの実行タイミングを区切って指定します。

●変形する図形とテキストのアニメーション

左上から角丸四角形が徐々に大きくなって現れて Hello!! CSS3 という文字が表示されます。

角丸四角形から楕円形に変形し、さらに円形になります。円形は不規則に回転し、最後は

左回転を続けます。これは上記１の方法で複数のアニメーションを連続して１回だけ動か

しています。

サンプルＣＳＳ１

アニメーションＢ（待ち）

アニメーションＣ（待ち）

アニメーションＤ（待ち）

0%

100%

0%

100%

0%

100%

0%

100%

アニメーションＢ

アニメーションＣ

0%

30%

50%

75%

0%

100%

0%

100%

0%

60%

アニメーションＤ

40%

アニメーションＡ

アニメーションＢ

100%

アニメーションＡ

アニメーションＢ

アニメーションＣ

アニメーションＤ

アニメーションＡ

アニメーションＤ

アニメーションＢ

アニメーションＣ

(2)

【MorphAndTextAnime の説明】

〔HTML の記述（MorphAndTextAnime.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 div1 の div 要素を記述し、中につぎの記述をします。id 属性 div2 の div 要素を記

述し、中に Hello!! CSS3 と記述します。

〔CSS の記述（MorphAndTextAnime.css）

〕

#stage ステージのスタイルを指定します。overflow: hidden;を指定します。図形に遠近感

を持たせるために perspective: 500px;と指定します。

#stage { width: 600px; height: 400px; background-color: #000000; <!DOCTYPE html> <html> <head> <title>MorphAndTextAnime</title> <meta charset="UTF-8">

<body>

<p>■変形する図形にテキストを表示する。</p> <div id="stage">

<div id="div2">Hello!! CSS3</div> </div>

</div> </body> </html>

(3)

#div1 要素のスタイルを指定します。position は absolute、位置は top: -8px; left: -8px;

（#stage ボックスの左上端を起点とした位置）で指定します。width は 0px、height は 0px

で指定します。

背景色は background-color: #CCECF4;（薄い青色）、

ボーダーは border: solid

1px #7FCFE2;（水色）で指定します。

アニメーションを６つ指定します。

１．アニメーション名を RoundRectAnime1A、実行時間を 4s、イージングを linear、開始待

ち時間を 0s、繰り返しを 1、実行方向は normal で指定します。

２．アニメーション名を RoundRectAnime1B、実行時間を 4s、イージングを linear、開始待

ち時間を 4s、繰り返しを 1、実行方向は normal で指定します。

３．アニメーション名を RoundRectAnime1C、実行時間を 4s、イージングを linear、開始待

ち時間を 8s、繰り返しを 1、実行方向は normal で指定します。

４．アニメーション名を RoundRectAnime1D、実行時間を 10s、イージングを linear、開始

待ち時間を 12s、繰り返しを 1、実行方向は normal で指定します。

５．アニメーション名を RoundRectAnime1E、実行時間を 10s、イージングを linear、開始

待ち時間を 22s、繰り返しを infinite、実行方向は normal で指定します。

６．アニメーション名を RoundRectAnime1F、実行時間を 12s、イージングを linear、開始

待ち時間を 0s、繰り返しを 1、実行方向は normal で指定します。

アニメーションの結果を次のアニメーションに引き継ぐために animation-fill-mode:

forwards;の指定をします。

#div1 { top: -8px; left: -8px; width: 0px; height: 0px; background-color: #CCECF4; border: solid 1px #7FCFE2; position: absolute;

animation: RoundRectAnime1A 4s linear 0s 1 normal, RoundRectAnime1B 4s linear 4s 1 normal, RoundRectAnime1C 4s linear 8s 1 normal, RoundRectAnime1D 10s linear 12s 1 normal, RoundRectAnime1E 10s linear 22s infinite normal, RoundRectAnime1F 12s linear 0s 1 normal;

position: relative; overflow: hidden; perspective: 500px; -webkit-perspective: 500px; }

(4)

アニメーション名 RoundRectAnime1A に対応するタイムライン

（@keyframes）

を指定します。

0%から 50%の間に top: -8px; left: -8px;から top: 122px; left: 87px;に移動させ、width:

0px; height: 0px;から width: 400px; height: 150px;に拡大し、ボーダーの幅を border:

solid 1px #7FCFE2;から border: solid 10px #7FCFE2;に変更し、border-radius: 50px;

で四隅の角を丸くします。50%から 100%まではそのままにします。

アニメーション名 RoundRectAnime1B に対応するタイムライン

（@keyframes）

を指定します。

0%ではアニメーション RoundRectAnime1A の結果の状態にします。0%から 50%の間に

border-radius: 50px;から border-radius: 210px / 85px;に変更し楕円形にします。50%

から 100%まではそのままにします。

@keyframes RoundRectAnime1A { 0% { }

50% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 50px; } 100% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 50px; } }

@-webkit-keyframes RoundRectAnime1A { 0% { }

50% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 50px; } 100% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 50px; } }

@keyframes RoundRectAnime1B {

0% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 50px; } 50% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 210px / 85px; } 100% { top: 122px; left: 87px; width: 400px; height: 150px;

-webkit-animation: RoundRectAnime1A 4s linear 0s 1 normal, RoundRectAnime1B 4s linear 4s 1 normal, RoundRectAnime1C 4s linear 8s 1 normal, RoundRectAnime1D 10s linear 12s 1 normal, RoundRectAnime1E 10s linear 22s infinite normal, RoundRectAnime1F 12s linear 0s 1 normal;

animation-fill-mode: forwards;

-webkit-animation-fill-mode: forwards; }

(5)

アニメーション名 RoundRectAnime1C に対応するタイムライン

（@keyframes）

を指定します。

0%ではアニメーション RoundRectAnime1B の結果の状態にします。0%から 50%の間に

border-radius: 210px / 85px;から border-radius: 160px;に変更し円形にします。50%か

ら 100%まではそのままにします。

アニメーション名 RoundRectAnime1D に対応するタイムライン

（@keyframes）

を指定します。

0%ではアニメーション RoundRectAnime1C の結果の状態にします。0%から 100%の間に

transform: rotateZ(360deg) rotateY(720deg) rotateX(1080deg);で、円形を時計回りに

360 度、Y 軸の正方向から見て時計回りに 720 度、X 軸の正方向から見て時計回りに 1080 度

を同時に回転させます。

@keyframes RoundRectAnime1C {

0% { top: 122px; left: 87px; width: 400px; height: 150px;

border: solid 10px #7FCFE2; border-radius: 210px / 85px; } 50% { top: 40px; left: 130px; width: 300px; height: 300px;

border: solid 10px #7FCFE2; border-radius: 160px; } 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; } }

@-webkit-keyframes RoundRectAnime1C {

0% { top: 122px; left: 87px; width: 400px; height: 150px;

border: solid 10px #7FCFE2; border-radius: 210px / 85px; } 50% { top: 40px; left: 130px; width: 300px; height: 300px;

border: solid 10px #7FCFE2; border-radius: 160px; } 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; } }

@keyframes RoundRectAnime1D {

0% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; } 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px;

transform: rotateZ(360deg) rotateY(720deg) rotateX(1080deg); } border: solid 10px #7FCFE2; border-radius: 210px / 85px; } }

@-webkit-keyframes RoundRectAnime1B {

0% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 50px; } 50% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 210px / 85px; } 100% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 210px / 85px; } }

(6)

アニメーション名 RoundRectAnime1E に対応するタイムライン

（@keyframes）

を指定します。

0%ではアニメーション RoundRectAnime1D の結果の状態（円形が正面を向いている状態）に

します。0%から 100%の間に transform: rotateY(-360deg);で Y 軸の正方向から見て反時計

回りに 360 度回転させます。

アニメーション RoundRectAnime1E は繰り返しを infinite で指定してあるのでこれ以降は

円形が無限に回り続けることになります。

アニメーション名 RoundRectAnime1F に対応するタイムライン

（@keyframes）

を指定します。

図形の背景色とボーダーの色をを変化させます。0%では background-color: #000000;（黒

色） border: solid 1px #000000;（黒色）に指定します。0%から 25%の間に background-color:

#0000FF;（青色） border: solid 10px #00FF99;（青緑色）にします。25%から 50%の間に

background-color: #00FFFF;（シアン色） border: solid 10px #9900FF;（紫色）にしま

す。50%から 75%の間に background-color: #FFFF00;（黄色） border: solid 10px #0099FF;

（ダークシアン色）にします。75%から 100%の間に background-color: #FF0000;（赤色）

border: solid 10px #7FCFE2;（水色）にします。

@keyframes RoundRectAnime1E {

0% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; } 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; transform: rotateY(-360deg); }

}

@-webkit-keyframes RoundRectAnime1E {

0% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; } 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; -webkit-transform: rotateY(-360deg); }

} }

@-webkit-keyframes RoundRectAnime1D {

0% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; } 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px;

-webkit-transform: rotateZ(360deg) rotateY(720deg) rotateX(1080deg); } }

(7)

#div2 要素のスタイルを指定します。position は absolute、位置は top: 40px; left: 0px;

（#div1 ボックスの左上端を起点とした位置）

で指定します。

width は 400px、

height は 150px

で指定します。テキストのスタイルを text-align: center;、color: #FF9900;（オレンジ

色）

、font: bold 64px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;と指定

します。opacity: 0.0;で見えないようにしておきます。

アニメーションを４つ指定します。

１．アニメーション名を RoundRectAnime2A、実行時間を 4s、イージングを linear、開始待

ち時間を 0s、繰り返しを 1、実行方向は normal で指定します。

２．アニメーション名を RoundRectAnime2B、実行時間を 4s、イージングを linear、開始待

ち時間を 4s、繰り返しを 1、実行方向は normal で指定します。

３．アニメーション名を RoundRectAnime2C、実行時間を 4s、イージングを linear、開始待

ち時間を 8s、繰り返しを 1、実行方向は normal で指定します。

４．アニメーション名を RoundRectAnime2D、実行時間を 12s、イージングを linear、開始

待ち時間を 0s、繰り返しを 1、実行方向は normal で指定します。

アニメーションの結果を次のアニメーションに引き継ぐために animation-fill-mode:

forwards;の指定をします。

@keyframes RoundRectAnime1F {

0% { background-color: #000000; border: solid 1px #000000; } 25% { background-color: #0000FF; border: solid 10px #00FF99; } 50% { background-color: #00FFFF; border: solid 10px #9900FF; } 75% { background-color: #FFFF00; border: solid 10px #90099FF; } 100% { background-color: #FF0000; border: solid 10px #7FCFE2; } }

@-webkit-keyframes RoundRectAnime1F {

0% { background-color: #000000; border: solid 1px #000000; } 25% { background-color: #0000FF; border: solid 10px #00FF99; } 50% { background-color: #00FFFF; border: solid 10px #9900FF; } 75% { background-color: #FFFF00; border: solid 10px #90099FF; } 100% { background-color: #FF0000; border: solid 10px #7FCFE2; } } #div2 { top: 40px; left: 0px; width: 400px; height: 150px; text-align: center; color: #FF9900;

font: bold 64px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; opacity: 0.0;

position: absolute;

(8)

アニメーション名 RoundRectAnime2A に対応するタイムライン

（@keyframes）

を指定します。

0%から 50%のまでは opacity: 0.0;のままです。50%から 70%の間に opacity: 0.0; opacity:

1.0;に変更し、テキストが徐々に見えるようにします。70%から 100%までは opacity: 1.0;

のままにします。

アニメーション名 RoundRectAnime2B に対応するタイムライン

（@keyframes）

を指定します。

0%で opacity: 1.0;に指定します。0%から 100%まで opacity: 1.0;のままにします。

@keyframes RoundRectAnime2A { 0% { opacity: 0.0; } 50% { opacity: 0.0; } 70% { opacity: 1.0; } 100% { opacity: 1.0; } } @-webkit-keyframes RoundRectAnime2A { 0% { opacity: 0.0; } 50% { opacity: 0.0; } 70% { opacity: 1.0; } 100% { opacity: 1.0; } } @keyframes RoundRectAnime2B { 0% { opacity: 1.0; } 100% { opacity: 1.0; } } @-webkit-keyframes RoundRectAnime2B { 0% { opacity: 1.0; } 100% { opacity: 1.0; } }

animation: RoundRectAnime2A 4s linear 0s 1 normal,

RoundRectAnime2B 4s linear 4s 1 normal, RoundRectAnime2C 4s linear 8s 1 normal, RoundRectAnime2D 12s linear 0s 1 normal; -webkit-animation: RoundRectAnime2A 4s linear 0s 1 normal, RoundRectAnime2B 4s linear 4s 1 normal, RoundRectAnime2C 4s linear 8s 1 normal, RoundRectAnime2D 12s linear 0s 1 normal;

animation-fill-mode: forwards;

-webkit-animation-fill-mode: forwards; }

(9)

アニメーション名 RoundRectAnime2C に対応するタイムライン

（@keyframes）

を指定します。

0%から 50%のまでは opacity: 1.0;のままです。0%から 50%の間に opacity: 1.0; のままで

top: 40px; left: 0px;から top: 80px; left: 50px;に変更し、width: 400px;から width:

200px;に変更し、テキストを２段書きにします。70%から 100%まではそのままにします。

アニメーション名 RoundRectAnime2D に対応するタイムライン

（@keyframes）

を指定します。

テキストの色をを変化させます。0%から 25%のまでは color: #FF9900;（オレンジ色）のま

まです。25%から 50%の間に color: #9900FF;（紫色）に、50%から 75%の間に color: #0099FF;

（ダークシアン色）に、75%から 100%の間に color: #00FF99;（青緑色）にします。

@keyframes RoundRectAnime2C { 0% { opacity: 1.0; }

50% { opacity: 1.0; top: 80px; left: 50px; width: 200px; } 100% { opacity: 1.0; top: 80px; left: 50px; width: 200px; } }

@-webkit-keyframes RoundRectAnime2C { 0% { opacity: 1.0; }

50% { opacity: 1.0; top: 80px; left: 50px; width: 200px; } 100% { opacity: 1.0; top: 80px; left: 50px; width: 200px; } } @keyframes RoundRectAnime2D { 0% { color: #FF9900; } 25% { color: #FF9900; } 50% { color: #9900FF; } 75% { color: #0099FF; } 100% { color: #00FF99; } } @-webkit-keyframes RoundRectAnime2D { 0% { color: #FF9900; } 25% { color: #FF9900; } 50% { color: #9900FF; } 75% { color: #0099FF; } 100% { color: #00FF99; } }

(10)

●テキストがバウンド、スィング、円運動するアニメーション

テキスト文字が上下にバウンド、左右にバウンド、スィング、円運動します。これも上記

１の方法で、待ち時間を利用して複数のアニメーションを連続して１回だけ動かします。

【BoundSwingText の説明】

〔HTML の記述（BoundSwingText.html）

〕

id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや

テキストを記述します。

id 属性 txt_base1 から id 属性 txt_base4 の div 要素に class 属性 txt_base を付加します。

id 属性 txt_base1 と id 属性 txt_base3 の div 要素は div 要素の中にテキスト

「Bound Swing

Circle」を記述します。id 属性 txt_base2 と id 属性 txt_base4 の div 要素は中に span 要

素を記述し、その span 要素の中にテキストを記述します。

<!DOCTYPE html> <html> <head> <title>BoundSwingText</title> <meta charset="UTF-8">

(11)

〔CSS の記述（BoundSwingText.css）

〕

先ず、アニメーションが動く#stage の記述をします。テキストのスィングや円運動の時に

テキストのボックスが#stage からはみ出るので overflow: hidden;を指定します。

テキストのスタイルを指定します。

.txt_base クラス（#txt_base1 から#txt_base4）の共通スタイルを指定します。

.txt_base span（#txt_base2 と#txt_base4 の span 要素）の共通スタイルを指定します。

#stage {

width: 500px; height: 300px; border: solid 1px #000000; background-color: #DDDDDD; text-shadow: 1px 1px #999999;

font: 16px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: #000000; text-align: center; position: relative; overflow: hidden; } <body> <p>■Text をバウンド、スィング、円運動させる。</p> <div id="stage">

<div id="txt_base1" class="txt_base">Bound Swing Circle</div>

<div id="txt_base2" class="txt_base"><span>Bound Swing Circle</span></div> <div id="txt_base3" class="txt_base">Bound Swing Circle</div>

<div id="txt_base4" class="txt_base"><span>Bound Swing Circle</span></div> </div> </body> </html> .txt_base { top: 270px; left: 150px; width: 200px; height: 30px; /* border: 1px solid red; */ position: absolute;

}

.txt_base span { top: 0px; left: 0px; width: 200px; height: 30px; /* border: 1px solid blue; */ position: absolute;

(12)

●上下にバウンドするアニメーション

#txt_base1 ボックスのスタイルを指定します。opacity: 1.0;で見えるようにしておきます。

アニメーション名を up_down_anime、実行時間を 4s、イージングを linear、開始待ち時間

を 0s、繰り返しを 1、実行方向は normal で指定します。

もう１つ、アニメーション名を opacity0_anime、実行時間を 23s、イージングを linear、

開始待ち時間を 4s、繰り返しを 1、実行方向は normal で指定します。これは「上下にバウ

ンドするアニメーション」が終了したら、

「左右にバウンドするアニメーション」

、

「スィン

グするアニメーション」、「円運動するアニメーション」が終了するまで（23 秒間）、

#txt_base1 ボックスを見えないようにするためです。

アニメーション名 up_down_anime に対応するタイムライン（@keyframes）を指定します。

10%で transform: translateY(-260px);で最高位置へ移動させます。20%で最低位置まで戻

し、30%で-160px へ移動というように徐々に高さを低くしていきます。100%では最低位置へ

戻します。

#txt_base1 { opacity: 1.0;

animation: up_down_anime 4s linear 0s 1 normal, opacity0_anime 23s linear 4s 1 normal; -webkit-animation: up_down_anime 4s linear 0s 1 normal, opacity0_anime 23s linear 4s 1 normal; }

(13)

アニメーション名 opacity0_anime に対応するタイムライン（@keyframes）を指定します。

0%で opacity: 0.0;で見えないようにして、100%までそのままにします。

@keyframes up_down_anime { 0% { animation-timing-function: ease-out; }

10% { transform: translateY(-260px); animation-timing-function: ease-in; } 20% { transform: translateY(0px); animation-timing-function: ease-out; } 30% { transform: translateY(-160px); animation-timing-function: ease-in; } 40% { transform: translateY(0px); animation-timing-function: ease-out; } 50% { transform: translateY(-90px); animation-timing-function: ease-in; } 60% { transform: translateY(0px); animation-timing-function: ease-out; } 70% { transform: translateY(-40px); animation-timing-function: ease-in; } 80% { transform: translateY(0px); animation-timing-function: ease-out; } 90% { transform: translateY(-10px); animation-timing-function: ease-in; } 100% { transform: translateY(0px); }

}

@-webkit-keyframes up_down_anime {

0% { animation-timing-function: ease-out; }

10% { -webkit-transform: translateY(-260px); -webkit-animation-timing-function: ease-in; }

20% { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-out; }

90% { -webkit-transform: translateY(-10px); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0px); } } @keyframes opacity0_anime { 0% { opacity: 0.0; } 100% { opacity: 0.0; } } @-webkit-keyframes opacity0_anime { 0% { opacity: 0.0; } 100% { opacity: 0.0; } }

(14)

●左右にバウンドするアニメーション

#txt_base2（横移動するボックス）のスタイルを指定します。opacity: 0.0;で見えないよ

うにしておきます。

アニメーション名を bound_anime、実行時間を 4s、イージングを linear、開始待ち時間を

4s、繰り返しを 2、実行方向は normal で指定します。

もう１つ、アニメーション名を opacity1_anime、実行時間を 8s、イージングを linear、開

始待ち時間を 4s、繰り返しを 1、実行方向は normal で指定します。これは「左右にバウン

ドするアニメーション」が動く間だけ、#txt_base2 ボックスを見えるようにするためです。

アニメーション名 bound_anime に対応するタイムライン（@keyframes）を指定します。12.5%

で transform: translateX(-80px);で水平に左方向へ 80px まで ease-in で移動させます。

25%で transform: translateX(-160px);で水平に左方向へ 160px まで ease-out で移動させ

ます。25%から 50%で元の位置に戻し、50%から 75%で右方向へ移動させ、75%から 100%で元

の位置へ戻します。

#txt_base2 { opacity: 0.0;

animation: bound_anime 4s linear 4s 2 normal, opacity1_anime 8s linear 4s 1 normal; -webkit-animation: bound_anime 4s linear 4s 2 normal, opacity1_anime 8s linear 4s 1 normal; }

(15)

#txt_base2 span（縦移動するボックス）のスタイルを指定します。

アニメーション名を bound_anime_A、実行時間を 4s、イージングを linear、開始待ち時間

を 4s、繰り返しを 2、実行方向は normal で指定します。

アニメーション名 bound_anime_A に対応するタイムライン（@keyframes）を指定します。

12.5%で transform: translateY(-250px);で上方向へ 250px まで ease-out で移動させます。

25%で transform: translateY(0px);で元の位置に ease-in で戻します。以後 25%ごとに同

様の動きをして 100%までの間に４回行います。

@keyframes bound_anime {

0% { transform: translateX(0px); animation-timing-function: ease-in; } 12.5% { transform: translateX(-80px); animation-timing-function: ease-out; } 25% { transform: translateX(-160px); animation-timing-function: ease-in; } 37.5% { transform: translateX(-80px); animation-timing-function: ease-out; } 50% { transform: translateX(0px); animation-timing-function: ease-in; } 62.5% { transform: translateX(80px); animation-timing-function: ease-out; } 75% { transform: translateX(160px); animation-timing-function: ease-in; } 87.5% { transform: translateX(80px); animation-timing-function: ease-out; } 100% { transform: translateX(0px); }

}

@-webkit-keyframes bound_anime {

0% { -webkit-transform: translateX(0px); -webkit-animation-timing-function: ease-in; } 12.5% { -webkit-transform: translateX(-80px); -webkit-animation-timing-function: ease-out; }

25% { -webkit-transform: translateX(-160px); -webkit-animation-timing-function: ease-in; }

37.5% { -webkit-transform: translateX(-80px); -webkit-animation-timing-function: ease-out; }

50% { -webkit-transform: translateX(0px); -webkit-animation-timing-function: ease-in; } 62.5% { -webkit-transform: translateX(80px); -webkit-animation-timing-function: ease-out; }

75% { -webkit-transform: translateX(160px); -webkit-animation-timing-function: ease-in; }

87.5% { -webkit-transform: translateX(80px); -webkit-animation-timing-function: ease-out; }

100% { -webkit-transform: translateX(0px); } }

#txt_base2 span {

animation: bound_anime_A 4s linear 4s 2 normal;

-webkit-animation: bound_anime_A 4s linear 4s 2 normal; }

@keyframes bound_anime_A {

0% { transform: translateY(0px); animation-timing-function: ease-out; } 12.5% { transform: translateY(-250px); animation-timing-function: ease-in; }

(16)

#txt_base2 ボックスに指定してあったアニメーション名 opacity1_anime に対応するタイム

ライン（@keyframes）を指定します。0%で opacity: 1.0;で見えるようにして、98%までそ

のままにします。98%から 100%の間に opacity: 0.0;で元のように見えないようにします。

98%から見えないようにするのは、次に始まる「スィングするアニメーション」が始まった

時にテキスト文字が一瞬だけ二重に重なって見えるのを防ぐためです。この

opacity1_anime は「左右にバウンドするアニメーション」

、

「スィングするアニメーション」

、

「円運動するアニメーション」の共通タイムライン（@keyframes）です。

@keyframes opacity1_anime { 0% { opacity: 1.0; } 98% { opacity: 1.0; } 100% { opacity: 0.0; } } @-webkit-keyframes opacity1_anime { 0% { opacity: 1.0; } 98% { opacity: 1.0; } 100% { opacity: 0.0; } }

25% { transform: translateY(0px); animation-timing-function: ease-out; } 37.5% { transform: translateY(-250px); animation-timing-function: ease-in; } 50% { transform: translateY(0px); animation-timing-function: ease-out; } 62.5% { transform: translateY(-250px); animation-timing-function: ease-in; } 75% { transform: translateY(0px); animation-timing-function: ease-out; } 87.5% { transform: translateY(-250px); animation-timing-function: ease-in; } 100% { transform: translateY(0px); }

}

@-webkit-keyframes bound_anime_A {

0% { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-out; } 12.5% { -webkit-transform: translateY(-250px); -webkit-animation-timing-function: ease-in; }

37.5% { -webkit-transform: translateY(-250px); -webkit-animation-timing-function: ease-in; }

100% { -webkit-transform: translateY(0px); } }

(17)

●スィングするアニメーション

#txt_base3（スィングするボックス）のスタイルを指定します。opacity: 0.0;で見えない

ようにしておきます。ボックスをスィングさせる（円弧を描く）ために、変化の起点（回

転の中心）を transform-origin: center -250px;で指定します。

アニメーション名を swing_anime、実行時間を 2s、イージングを linear、開始待ち時間を

12s、繰り返しを 3、実行方向は normal で指定します。

もう１つ、アニメーション名を opacity1_anime、実行時間を 6s、イージングを linear、開

始待ち時間を 12s、繰り返しを 1、実行方向は normal で指定します。これは「スィングす

るアニメーション」が動く間だけ、#txt_base3 ボックスを見えるようにするためです。

アニメーション名 swing_anime に対応するタイムライン（@keyframes）を指定します。25%

で transform: rotateZ(45deg);で時計回りに 45 度、ease-out で回転させます。25%から 50%

で元の位置に ease-in で戻し、50%から 75%で transform: rotateZ(-45deg);で反時計回り

に 45 度、ease-out で回転させます。75%から 100%で元の位置に ease-in で戻します。

#txt_base3 { opacity: 0.0; transform-origin: center -250px; -webkit-transform-origin: center -250px;

animation: swing_anime 2s linear 12s 3 normal, opacity1_anime 6s linear 12s 1 normal; -webkit-animation: swing_anime 2s linear 12s 3 normal, opacity1_anime 6s linear 12s 1 normal; }

(18)

アニメーション名 opacity1_anime に対応するタイムライン（@keyframes）を指定します。

0%で opacity: 1.0;で見えるようにして、98%までそのままにします。98%から 100%の間に

opacity: 0.0;で元のように見えないようにします。98%から見えないようにするのは、次

に始まる「円運動するアニメーション」が始まった時にテキスト文字が一瞬だけ二重に重

なって見えるのを防ぐためです。この opacity1_anime は「左右にバウンドするアニメーシ

ョン」、

「スィングするアニメーション」、「円運動するアニメーション」の共通タイムライ

ン（@keyframes）です。

@keyframes swing_anime { 0% { animation-timing-function: ease-out; }

25% { transform: rotateZ(45deg); animation-timing-function: ease-in; } 50% { transform: rotateZ(0deg); animation-timing-function: ease-out; } 75% { transform: rotateZ(-45deg); animation-timing-function: ease-in; } 100% { }

}

@-webkit-keyframes swing_anime {

0% { -webkit-animation-timing-function: ease-out; }

25% { -webkit-transform: rotateZ(45deg); -webkit-animation-timing-function: ease-in; } 50% { -webkit-transform: rotateZ(0deg); -webkit-animation-timing-function: ease-out; } 75% { -webkit-transform: rotateZ(-45deg); -webkit-animation-timing-function: ease-in; } 100% { } } @keyframes opacity1_anime { 0% { opacity: 1.0; } 98% { opacity: 1.0; } 100% { opacity: 0.0; } } @-webkit-keyframes opacity1_anime { 0% { opacity: 1.0; } 98% { opacity: 1.0; } 100% { opacity: 0.0; } }

(19)

●円運動するアニメーション

#txt_base4 ボックス（円運動するボックス）のスタイルを指定します。opacity: 0.0;で見

えないようにしておきます。ボックスを円運動させるために、変化の起点（回転の中心）

を transform-origin: center -110px;で指定します。

アニメーション名を circle_anime、実行時間を 9s、イージングを ease-out、開始待ち時間

を 18s、繰り返しを 1、実行方向は normal で指定します。

もう１つ、アニメーション名を opacity1_anime、実行時間を 9s、イージングを linear、開

始待ち時間を 18s、繰り返しを 1、実行方向は normal で指定します。これは「円運動する

アニメーション」が動く間だけ、#txt_base4 ボックスを見えるようにするためです。

アニメーション名 circle_anime に対応するタイムライン（@keyframes）を指定します。0%

から 100%の間に transform: rotateZ(1080deg);で時計回りに 1080 度回転（３回転）させ

ます。アニメーション名 circle_anime でイージングを ease-out で指定しているので、最

後はゆっくりと停止します。

#txt_base4 { opacity: 0.0; transform-origin: center -110px; -webkit-transform-origin: center -110px;

animation: circle_anime 9s ease-out 18s 1 normal, opacity1_anime 9s linear 18s 1 normal;

-webkit-animation: circle_anime 9s ease-out 18s 1 normal, opacity1_anime 9s linear 18s 1 normal; }

(20)

#txt_base4 span（逆回転するボックス）のスタイルを指定します。テキスト文字を水平に

保つために#txt_base4 ボックスとは逆方向に回転させます。

アニメーション名を circle_anime_A、実行時間を 9s、イージングを ease-out、開始待ち時

間を 18s、繰り返しを 1、実行方向は normal で指定します。

アニメーション名 circle_anime_A に対応するタイムライン（@keyframes）を指定します。

0%から 100%の間に transform: rotateZ(-1080deg);で反時計回りに 1080 度回転（３回転）

させます。アニメーション名 circle_anime_A でイージングを ease-out で指定しているの

で、最後はゆっくりと停止します。

#txt_base4 ボックスに指定してあったアニメーション名 opacity1_anime に対応するタイム

ライン（@keyframes）を指定します。0%で opacity: 1.0;で見えるようにして、98%までそ

のままにします。98%から 100%の間に opacity: 0.0;で元のように見えないようにします。

98%から見えないようにするのは、アニメーションすべてが終わって「上下にバウンドする

アニメーション」の最初に戻った時にテキスト文字が一瞬だけ二重に重なって見えるのを

防ぐためです。この opacity1_anime は「左右にバウンドするアニメーション」

、

「スィング

するアニメーション」、「円運動するアニメーション」の共通タイムライン（@keyframes）

@keyframes circle_anime { 0% { } 100% { transform: rotateZ(1080deg); } } @-webkit-keyframes circle_anime { 0% { } 100% { -webkit-transform: rotateZ(1080deg); } } #txt_base4 span {

animation: circle_anime_A 9s ease-out 18s 1 normal;

-webkit-animation: circle_anime_A 9s ease-out 18s 1 normal; } @keyframes circle_anime_A { 0% { } 100% { transform: rotateZ(-1080deg); } } @-webkit-keyframes circle_anime_A { 0% { } 100% { -webkit-transform: rotateZ(-1080deg); } }

(21)

です。

@keyframes opacity1_anime { 0% { opacity: 1.0; } 98% { opacity: 1.0; } 100% { opacity: 0.0; } } @-webkit-keyframes opacity1_anime { 0% { opacity: 1.0; } 98% { opacity: 1.0; } 100% { opacity: 0.0; } }

(22)

●文字が１個ずつが転がりながらやって来るアニメーション

左側から文字が１個ずつ回転しなら移動してきます。文字が全部そろったらしばらくその

まま表示し消えます。再度左側から文字が転がってきます。これは上記２の方法で複数の

アニメーションを連続して繰り返し動かしています。

【RollingCharctersAnime1 の説明】

〔HTML の記述（RollingCharctersAnime1.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 rolling1 から rolling12 の１２個の div 要素を記述し、それぞれの div 要素の中

に!・?・3・S・S・C・-・5・L・M・T・H の文字を記述します。

サンプルＣＳＳ３

<!DOCTYPE html> <html> <head> <title>RollingCharctersAnime1</title> <meta charset="UTF-8">

(23)

〔CSS の記述（RollingCharctersAnime1.css）

〕

#stage ステージのスタイルを指定します。背景色を background-color: #000000;（黒色）

で指定します。文字の開始位置が#stage ボックス左側の外になるので overflow: hidden;

を指定します。

#stage div 要素のスタイルを指定します。文字の共通スタイルになります。position は

absolute、位置は top: 20px; left: -200px;（#stage ボックスの左上端を起点とした位置）

で指定します。opacity: 0.0;で文字が見えないようにしておきます。文字のスタイルを

color: #9999FF;（水色）

、font: bold 96px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro",

Verdana;で指定します。

#rolling1 要素（文字「!」）のスタイルを指定します。

アニメーション名を rollingAnime1、実行時間を 20s、イージングを linear、開始待ち時間

#stage { width: 800px; height: 150px; background-color: #000000; position: relative; overflow: hidden; } #stage div { top: 20px; left: -200px; opacity: 0.0; position: absolute; color: #9999FF;

font: bold 96px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; } <div id="rolling6">C</div> <div id="rolling7">-</div> <div id="rolling8">5</div> <div id="rolling9">L</div> <div id="rolling10">M</div> <div id="rolling11">T</div> <div id="rolling12">H</div> </div> </body> </html>

(24)

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime1 に対応するタイムライン（@keyframes）を指定します。

0%から 12%の間に transform: rotateZ(2160deg);で時計回りに 2160 度回転させながら left:

-200px;から left: 700px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々

に見えるようにします。12%から 100%まではそのままにします。

#rolling2 要素（文字「?」）のスタイルを指定します。

アニメーション名を rollingAnime2、実行時間を 20s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime2 に対応するタイムライン（@keyframes）を指定します。

0%から 13%までは初期状態（移動・回転せず、見えません）のままです。13%から 24%の間

に transform: rotateZ(2160deg);で時計回りに 2160 度回転させながら left: -200px;から

left: 650px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。24%から 100%まではそのままにします。

@keyframes rollingAnime1 {

0% { left: -200px; transform: rotateZ(0deg); opacity: 0.0; } 12% { left: 700px; transform: rotateZ(2160deg); opacity: 1.0; } 100% { left: 700px; transform: rotateZ(2160deg); opacity: 1.0; } }

@-webkit-keyframes rollingAnime1 {

0% { left: -200px; -webkit-transform: rotateZ(0deg); opacity: 0.0; } 12% { left: 700px; -webkit-transform: rotateZ(2160deg); opacity: 1.0; } 100% { left: 700px; -webkit-transform: rotateZ(2160deg); opacity: 1.0; } }

/* 文字「!」回転 *****************************************/ #rolling1 {

animation: rollingAnime1 20s linear 0s infinite normal;

-webkit-animation: rollingAnime1 20s linear 0s infinite normal; }

/* 文字「?」回転 *****************************************/ #rolling2 {

(25)

#rolling3 要素（文字「3」）のスタイルを指定します。

アニメーション名を rollingAnime3、実行時間を 20s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime3 に対応するタイムライン（@keyframes）を指定します。

0%から 25%までは初期状態（移動・回転せず、見えません）のままです。25%から 34%の間

に transform: rotateZ(1800deg);で時計回りに 1800 度回転させながら left: -200px;から

left: 600px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。34%から 100%まではそのままにします。

0% { left: -200px; transform: rotateZ(0deg); opacity: 0.0; } 13% { left: -200px; transform: rotateZ(0deg); opacity: 0.0; } 24% { left: 650px; transform: rotateZ(2160deg); opacity: 1.0; } 100% { left: 650px; transform: rotateZ(2160deg); opacity: 1.0; } }

0% { left: -200px; -webkit-transform: rotateZ(0deg); opacity: 0.0; } 13% { left: -200px; -webkit-transform: rotateZ(0deg); opacity: 0.0; } 24% { left: 650px; -webkit-transform: rotateZ(2160deg); opacity: 1.0; } 100% { left: 650px; -webkit-transform: rotateZ(2160deg); opacity: 1.0; } }

/* 文字「3」回転 *****************************************/ #rolling3 {

(26)

#rolling4 要素（文字「S」）のスタイルを指定します。

アニメーション名を rollingAnime4、実行時間を 20s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime4 に対応するタイムライン（@keyframes）を指定します。

0%から 35%までは初期状態（移動・回転せず、見えません）のままです。35%から 44%の間

に transform: rotateZ(1800deg);で時計回りに 1800 度回転させながら left: -200px;から

left: 540px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。44%から 100%まではそのままにします。

#rolling5 要素（文字「S」）のスタイルを指定します。

アニメーション名を rollingAnime5、実行時間を 20s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime5 に対応するタイムライン（@keyframes）を指定します。

0%から 45%までは初期状態（移動・回転せず、見えません）のままです。45%から 52%の間

に transform: rotateZ(1440deg);で時計回りに 1440 度回転させながら left: -200px;から

/* 文字「S」回転 *****************************************/ #rolling4 {

/* 文字「S」回転 *****************************************/ #rolling5 {

(27)

left: 480px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。52%から 100%まではそのままにします。

#rolling6 要素（文字「C」）のスタイルを指定します。

アニメーション名を rollingAnime6、実行時間を 20s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime6 に対応するタイムライン（@keyframes）を指定します。

0%から 53%までは初期状態（移動・回転せず、見えません）のままです。53%から 60%の間

に transform: rotateZ(1440deg);で時計回りに 1440 度回転させながら left: -200px;から

left: 410px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。60%から 100%まではそのままにします。

/* 文字「C」回転 *****************************************/ #rolling6 {

(28)

#rolling7 要素（文字「-」）のスタイルを指定します。

アニメーション名を rollingAnime7、実行時間を 20s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime7 に対応するタイムライン（@keyframes）を指定します。

0%から 61%までは初期状態（移動・回転せず、見えません）のままです。61%から 67%の間

に transform: rotateZ(1080deg);で時計回りに 1080 度回転させながら left: -200px;から

left: 360px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。67%から 100%まではそのままにします。

#rolling8 要素（文字「5」）のスタイルを指定します。

アニメーション名を rollingAnime8、実行時間を 20s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime8 に対応するタイムライン（@keyframes）を指定します。

0%から 68%までは初期状態（移動・回転せず、見えません）のままです。68%から 74%の間

/* 文字「-」回転 *****************************************/ #rolling7 {

/* 文字「5」回転 *****************************************/ #rolling8 {

(29)

に transform: rotateZ(1080deg);で時計回りに 1080 度回転させながら left: -200px;から

left: 310px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。74%から 100%まではそのままにします。

#rolling9 要素（文字「L」）のスタイルを指定します。

アニメーション名を rollingAnime9、実行時間を 20s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime9 に対応するタイムライン（@keyframes）を指定します。

0%から 75%までは初期状態（移動・回転せず、見えません）のままです。75%から 80%の間

に transform: rotateZ(1080deg);で時計回りに 1080 度回転させながら left: -200px;から

left: 250px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。80%から 100%まではそのままにします。

/* 文字「L」回転 *****************************************/ #rolling9 {

(30)

#rolling10 要素（文字「M」

）のスタイルを指定します。

アニメーション名を rollingAnime10、実行時間を 20s、イージングを linear、開始待ち時

間を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime10 に対応するタイムライン（@keyframes）を指定します。

0%から 81%までは初期状態（移動・回転せず、見えません）のままです。81%から 86%の間

に transform: rotateZ(720deg);で時計回りに 720 度回転させながら left: -200px;から

left: 180px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。86%から 100%まではそのままにします。

#rolling11 要素（文字「T」

）のスタイルを指定します。

アニメーション名を rollingAnime11、実行時間を 20s、イージングを linear、開始待ち時

間を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime11 に対応するタイムライン（@keyframes）を指定します。

0%から 87%までは初期状態（移動・回転せず、見えません）のままです。87%から 91%の間

/* 文字「M」回転 *****************************************/ #rolling10 {

/* 文字「T」回転 *****************************************/ #rolling11 {

(31)

に transform: rotateZ(720deg);で時計回りに 720 度回転させながら left: -200px;から

left: 120px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。91%から 100%まではそのままにします。

#rolling12 要素（文字「H」

）のスタイルを指定します。

アニメーション名を rollingAnime12、実行時間を 20s、イージングを linear、開始待ち時

間を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime12 に対応するタイムライン（@keyframes）を指定します。

0%から 92%までは初期状態（移動・回転せず、見えません）のままです。92%から 96%の間

に transform: rotateZ(720deg);で時計回りに 720 度回転させながら left: -200px;から

left: 50px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるように

します。96%から 100%まではそのままにします。

/* 文字「H」回転 *****************************************/ #rolling12 {

(32)

（注：上記のタイムラインの図を「 RollingCharacters タイムライン .pdf 」の

「RollingCharctersAnime1 タイムラインテーブル」で参照できます。各アニメーションの

(33)

●文字が次々と転がりながらやって来るアニメーション

左側から文字が次々と回転しなら移動してきます。文字が全部そろったらしばらくそのま

ま表示し消えます。再度左側から文字が転がってきます。これは上記２の方法で複数のア

ニメーションを連続して繰り返し動かしています。

【RollingCharctersAnime2 の説明】

〔HTML の記述（RollingCharctersAnime2.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 rolling1 から rolling12 の１２個の div 要素を記述し、それぞれの div 要素の中

に!・?・3・S・S・C・-・5・L・M・T・H の文字を記述します。

サンプルＣＳＳ４

<!DOCTYPE html> <html> <head> <title>RollingCharctersAnime2</title> <meta charset="UTF-8">

(34)

〔CSS の記述（RollingCharctersAnime2.css）

〕

#stage ステージのスタイルを指定します。背景色を background-color: #000000;（黒色）

で指定します。文字の開始位置が#stage ボックス左側の外になるので overflow: hidden;

を指定します。

#stage div 要素のスタイルを指定します。文字の共通スタイルになります。position は

absolute、位置は top: 20px; left: -200px;（#stage ボックスの左上端を起点とした位置）

で指定します。opacity: 0.0;で文字が見えないようにしておきます。文字のスタイルを

color: #9999FF;（水色）

、font: bold 96px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro",

Verdana;で指定します。

#rolling1 要素（文字「!」）のスタイルを指定します。

アニメーション名を rollingAnime1、実行時間を 10s、イージングを linear、開始待ち時間

#stage { width: 800px; height: 150px; background-color: #000000; position: relative; overflow: hidden; } #stage div { top: 20px; left: -200px; opacity: 0.0; position: absolute; color: #9999FF;

font: bold 96px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; } <div id="rolling6">C</div> <div id="rolling7">-</div> <div id="rolling8">5</div> <div id="rolling9">L</div> <div id="rolling10">M</div> <div id="rolling11">T</div> <div id="rolling12">H</div> </div> </body> </html>

(35)

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime1 に対応するタイムライン（@keyframes）を指定します。

0%から 33%の間に transform: rotateZ(2160deg);で時計回りに 2160 度回転させながら left:

-200px;から left: 700px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々

に見えるようにします。33%から 100%まではそのままにします。

#rolling2 要素（文字「?」）のスタイルを指定します。

アニメーション名を rollingAnime2、実行時間を 10s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime2 に対応するタイムライン（@keyframes）を指定します。

0%から 13%までは初期状態（移動・回転せず、見えません）のままです。13%から 42%の間

に transform: rotateZ(2160deg);で時計回りに 2160 度回転させながら left: -200px;から

left: 650px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。42%から 100%まではそのままにします。

0% { left: -200px; transform: rotateZ(0deg); opacity: 0.0; } 33% { left: 700px; transform: rotateZ(2160deg); opacity: 1.0; } 100% { left: 700px; transform: rotateZ(2160deg); opacity: 1.0; } }

0% { left: -200px; -webkit-transform: rotateZ(0deg); opacity: 0.0; } 33% { left: 700px; -webkit-transform: rotateZ(2160deg); opacity: 1.0; } 100% { left: 700px; -webkit-transform: rotateZ(2160deg); opacity: 1.0; } }

/* 文字「!」回転 *****************************************/ #rolling1 {

/* 文字「?」回転 *****************************************/ #rolling2 {

(36)

#rolling3 要素（文字「3」）のスタイルを指定します。

アニメーション名を rollingAnime3、実行時間を 10s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 rollingAnime3 に対応するタイムライン（@keyframes）を指定します。

0%から 24%までは初期状態（移動・回転せず、見えません）のままです。24%から 49%の間

に transform: rotateZ(1800deg);で時計回りに 1800 度回転させながら left: -200px;から

left: 600px;に移動させ、opacity: 0.0;から opacity: 1.0;に変更して徐々に見えるよう

にします。49%から 100%まではそのままにします。

/* 文字「3」回転 *****************************************/ #rolling3 {

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中につぎの記述をします id 属性 div2

1343 アニメーションを連続させる

複数のアニメーションを連続して適用するためには、つぎの２つの方法があります。

１．複数の連続したアニメーション全体を繰り返さずに１回だけ動かしたい場合は、待ち

時間を利用して複数のアニメーションを指定します。

２．複数の連続したアニメーション全体を繰り返し動かしたい場合は、アニメーション全

体を 100%として、各アニメーションの実行タイミングを区切って指定します。

●変形する図形とテキストのアニメーション

左上から角丸四角形が徐々に大きくなって現れて Hello!! CSS3 という文字が表示されます。

角丸四角形から楕円形に変形し、さらに円形になります。円形は不規則に回転し、最後は

左回転を続けます。これは上記１の方法で複数のアニメーションを連続して１回だけ動か

しています。

サンプルＣＳＳ１

アニメーションＢ（待ち）

アニメーションＣ（待ち）

アニメーションＤ（待ち）

0%

100%

0%

100%

0%

100%

0%

100%

アニメーションＢ

アニメーションＣ

0%

30%

50%

75%

0%

100%

0%

100%

0%

60%

アニメーションＤ

40%

アニメーションＡ

100%

100%

アニメーションＡ

アニメーションＢ

アニメーションＣ

アニメーションＤ

アニメーションＡ

アニメーションＤ

アニメーションＢ

アニメーションＣ

【MorphAndTextAnime の説明】

〔HTML の記述（MorphAndTextAnime.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 div1 の div 要素を記述し、中につぎの記述をします。id 属性 div2 の div 要素を記

述し、中に Hello!! CSS3 と記述します。

〔CSS の記述（MorphAndTextAnime.css）

〕

#stage ステージのスタイルを指定します。overflow: hidden;を指定します。図形に遠近感

を持たせるために perspective: 500px;と指定します。

#div1 要素のスタイルを指定します。position は absolute、位置は top: -8px; left: -8px;

（#stage ボックスの左上端を起点とした位置）で指定します。width は 0px、height は 0px

で指定します。

背景色は background-color: #CCECF4;（薄い青色）、

ボーダーは border: solid

1px #7FCFE2;（水色）で指定します。

アニメーションを６つ指定します。

１．アニメーション名を RoundRectAnime1A、実行時間を 4s、イージングを linear、開始待

ち時間を 0s、繰り返しを 1、実行方向は normal で指定します。

２．アニメーション名を RoundRectAnime1B、実行時間を 4s、イージングを linear、開始待

ち時間を 4s、繰り返しを 1、実行方向は normal で指定します。

３．アニメーション名を RoundRectAnime1C、実行時間を 4s、イージングを linear、開始待

ち時間を 8s、繰り返しを 1、実行方向は normal で指定します。

４．アニメーション名を RoundRectAnime1D、実行時間を 10s、イージングを linear、開始

待ち時間を 12s、繰り返しを 1、実行方向は normal で指定します。

５．アニメーション名を RoundRectAnime1E、実行時間を 10s、イージングを linear、開始

待ち時間を 22s、繰り返しを infinite、実行方向は normal で指定します。

６．アニメーション名を RoundRectAnime1F、実行時間を 12s、イージングを linear、開始

待ち時間を 0s、繰り返しを 1、実行方向は normal で指定します。

アニメーションの結果を次のアニメーションに引き継ぐために animation-fill-mode:

forwards;の指定をします。

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し中につぎの記述をします id 属性 div2

、font: bold 64px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;と指定