1221 Transitionの指定項目

(1)

animation-direction

animation-direction プロパティには、アニメーションのサイクルの全部または一部分を通常通り実行するか逆回転で実行するかを指定します。値説　　　　　明 normal reverse alternate alternate-reverse アニメーションの全ての繰り返しが指定された通りに実行される。初期値はnormal。アニメーションの全ての繰り返しが、指定された進路と逆の方向に実行される。アニメーションのサイクルの繰り返しが奇数回の時には通常の方向へ実行され、偶数回の時には逆の方向に実行される。アニメーションのサイクルの繰り返しが奇数回の時には逆の方向へ実行され、偶数回の時には通常の方向に実行される。 animation-direction プロパティの値が alternate または alternate-reverse の場合、 animation-iteration-count プロパティ（アニメーションのサイクルの繰り返し回数）の値が奇数か偶数かによって、アニメーションの進行方向が逆転します。また、 animation-iteration-count プロパティの値が infinite の場合は、 animation-direction プロパティの値による動作が繰り返し実行されます。アニメーションが逆回転で実行されている時には、animation-timing-function プロパティで指定された変化のタイミング・進行割合も逆回転になります。たとえば、ease-in のアニメーションが逆回転で実行されている時には、ease-out のアニメーションに見えます。 ●animation-direction: normal;のサンプル animation-direction プロパティでアニメーションの進行する方向を変えています。①～④ すべて animation-direction: normal;で指定して、通常の方向へ進行させます。 ①要素の位置が、右上から左下へ移動します。 ②要素の形が円形から少し角の丸い正方形に変化します。 ③要素の色が赤色→黄色→緑色→青色→マゼンタ色に変化します。 ④通常の方向へ進行中に要素の大きさが途中（前半）で小さくなり、また元の大きさに戻ります。プロパティサンプルＣＳＳ１

(2)

© 2016 電脳 Papa 2 【Anime05Normal の説明】〔HTML の記述（Anime05Normal.html）〕 Anime01.html の次の部分だけを変更した内容です。 <title> Anime05Normal</title>、 href=" Anime05Normal.css"、 <p>■animation-direction のサンプル。</p> 〔CSS の記述（Anime05Normal.css）〕先ず、アニメーションが動く#stage の記述をします。Anime01.css と同じです。

アニメーションさせる#ballBox 要素を記述します。position は absolute にして、位置は、 top: 5px; left: 5px;（#stage ボックスの左上端を基準とした位置）で指定します。大き

#stage { width: 600px; height: 160px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; } <!DOCTYPE html> <html> <head> <title>Anime05Normal</title> <meta charset="UTF-8">

(3)

さは width: 100px; height: 100px;にします。border-radius: 50%;で円形にして、ボーダーは border: solid 2px #000000;にします。background-color: red;で赤色にします。次にアニメーションの指定をします。animation-name: trans, colorChg, sizeChg;として #ballBox 要素に３つのアニメーション名を指定しています。animation-duration: 5s;として３つのアニメーション名の全部が５秒のアニメーションになります。

animation-timing-function は animation-timing-function: ease-in, linear, ease-out; と指定しています。trans アニメーションは ease-in なので初めはゆっくりで徐々に速くなり、colorChg アニメーションは linear なので等速で、sizeChg アニメーションは ease-out なので初めは早く徐々にゆっくりした変化になります。

animation-delay は animation-delay: 0s;と指定しています。trans アニメーション、 colorChg アニメーション、sizeChg アニメーションすべて即時に開始します。

animation-iteration-count は animation-iteration-count: 1;と指定しています。trans アニメーション、colorChg アニメーション、sizeChg アニメーションすべて１回だけ実行します。

animation-direction は animation-direction: normal;と指定しています。trans アニメーション、colorChg アニメーション、sizeChg アニメーションすべて通常の方向へ実行します。アニメーション名に対応するタイムライン（@keyframes）は Anime01.css と同じです。 #ballBox { top: 5px; left: 5px; width: 100px; height: 100px; border: solid 2px #000000; border-radius: 50%; background-color: red; position: absolute;

animation-name: trans, colorChg, sizeChg; animation-duration: 5s;

animation-timing-function: ease-in, linear, ease-out; animation-delay: 0s;

animation-iteration-count: 1; animation-direction: normal;

-webkit-animation-name: trans, colorChg, sizeChg; -webkit-animation-duration: 5s;

-webkit-animation-timing-function: ease-in, linear, ease-out; -webkit-animation-delay: 0s;

-webkit-animation-iteration-count: 1; -webkit-animation-direction: normal;

(4)

© 2016 電脳 Papa 4 ●animation-direction: reverse;のサンプル animation-direction プロパティでアニメーションの進行する方向を変えています。①～④ すべて animation-direction: reverse;で指定して、通常とは逆の方向へ進行させます。 ①要素の位置が、左下からに右上へ移動します。 ②要素の形が少し角の丸い正方形から円形に変化します。 ③要素の色がマゼンタ色→青色→緑色→黄色→赤色に変化します。 ④通常とは逆の方向へ進行中に要素の大きさが途中（後半）で小さくなり、また元の大きさに戻ります。【Anime05Reverse の説明】〔HTML の記述（Anime05Reverse.html）〕 Anime05Normal.html の次の部分だけを変更した内容です。 <title> Anime05Reverse </title>、

href=" Anime05Reverse.css"

〔CSS の記述（Anime05Reverse.css）〕

#stage の記述は Anime05Normal.css と同じです。

#ballBox 要素の記述は Anime05Normal.css と次の部分だけが違います。

animation-direction は animation-direction: reverse;と指定しています。trans アニメーション、colorChg アニメーション、sizeChg アニメーションすべて通常とは逆の方向へ実行します。サンプルＣＳＳ２ #ballBox { top: 5px; left: 5px; width: 100px; height: 100px; border: solid 2px #000000; border-radius: 50%; background-color: red; position: absolute;

(5)

© 2016 電脳 Papa 5 アニメーション名に対応するタイムライン（@keyframes）は Anime05.css と同じです。 ●animation-direction: alternate;のサンプル animation-direction プロパティでアニメーションの進行する方向を変えています。①～④ すべて animation-direction: alternate;で指定して、通常の方向へ進行させた後、通常とは逆の方向へ進行させます。 ①要素の位置が、右上から左下へ移動した後、左下からに右上へ移動します。 ②要素の形が円形から少し角の丸い正方形に変化した後、少し角の丸い正方形から円形に変化します。 ③要素の色が赤色→黄色→緑色→青色→マゼンタ色に変化した後、マゼンタ色→青色→ 緑色→黄色→赤色に変化します。 ④通常の方向へ進行中に要素の大きさが途中（前半）で小さくなり、また元の大きさに戻った後、通常とは逆の方向へ進行中に要素の大きさが途中（後半）で小さくなり、また元の大きさに戻ります。サンプルＣＳＳ３

animation-iteration-count: 1; animation-direction: reverse;

-webkit-animation-iteration-count: 1; -webkit-animation-direction: reverse;

(6)

【Anime05Alternate2 の説明】

〔HTML の記述（Anime05Alternate2.html）〕

Anime05Normal.html の次の部分だけを変更した内容です。 <title> Anime05Alternate2 </title>、

href=" Anime05Alternate2.css"

〔CSS の記述（Anime05Alternate2.css）〕

animation-direction は animation-direction: alternate; と指定しています。 animation-direction: alternate;の場合、animation-iteration-count の値によって動きが違ってきます。値が奇数回数の時には通常の方向へ実行され、偶数回数の時には逆の方向に実行されます。サンプルでは animation-iteration-count: 2;と指定しています。trans アニメーション、colorChg アニメーション、sizeChg アニメーションすべて通常の方向へ進行した後、通常とは逆の方向へ進行します。 #ballBox { top: 5px; left: 5px; width: 100px; height: 100px; border: solid 2px #000000; border-radius: 50%; background-color: red; position: absolute;

(7)

アニメーション名に対応するタイムライン（@keyframes）は Anime05.css と同じです。

animation-iteration-count: 2;

animation-direction: alternate;

-webkit-animation-iteration-count: 2;

-webkit-animation-direction: alternate;

(8)

© 2016 電脳 Papa 8 ●animation-direction: alternate-reverse;のサンプル animation-direction プロパティでアニメーションの進行する方向を変えています。①～④ すべて animation-direction: alternate-reverse;で指定して、通常とは逆の方向へ進行させた後、通常の方向へ進行させます。 ①要素の位置が、左下からに右上へ移動した後、右上から左下へ移動します。 ②要素の形が少し角の丸い正方形から円形に変化した後、円形から少し角の丸い正方形に変化します。 ③要素の色がマゼンタ色→青色→緑色→黄色→赤色に変化した後、赤色→黄色→緑色→ 青色→マゼンタ色に変化します。 ④通常とは逆の方向へ進行中に要素の大きさが途中（後半）で小さくなり、また元の大きさに戻った後、通常の方向へ進行中に要素の大きさが途中（前半）で小さくなり、また元の大きさに戻ります。【Anime05AltRev2nd の説明】〔HTML の記述（Anime05AltRev2nd.html）〕 Anime05Normal.html の次の部分だけを変更した内容です。 <title> Anime05AltRev2nd</title>、 href=" Anime05AltRev2nd.css" 〔CSS の記述（Anime05AltRev2nd.css）〕サンプルＣＳＳ４

(9)

animation-direction は animation-direction: alternate-reverse;と指定しています。 animation-direction: alternate-reverse;の場合、animation-iteration-count の値によって動きが違ってきます。値が奇数回数の時には通常とは逆の方向へ実行され、偶数回数の時には通常の方向に実行されます。サンプルでは animation-iteration-count: 2;と指定しています。trans アニメーション、colorChg アニメーション、sizeChg アニメーションすべて通常とは逆の方向へ進行した後、通常の方向へ進行します。アニメーション名に対応するタイムライン（@keyframes）は Anime05.css と同じです。 #ballBox { top: 5px; left: 5px; width: 100px; height: 100px; border: solid 2px #000000; border-radius: 50%; background-color: red; position: absolute;

animation-direction: alternate-reverse;

-webkit-animation-direction: alternate-reverse;

(10)

© 2016 電脳 Papa 10 ●animation-direction をアニメーション名ごとに違う値を適用したサンプルアニメーション名ごとに違う値を適用することもできます。このサンプルでは次のように違う値を適用させてみます。 ①要素の位置が、右上から左下へ移動した後、左下からに右上へ移動します（alternate）。 ②要素の形が円形から少し角の丸い正方形に変化した後、少し角の丸い正方形から円形に変化します（alternate）。 ③要素の色がマゼンタ色→青色→緑色→黄色→赤色に２回変化します（revrese）。 ④１回目は通常の方向へ進行中に要素の大きさが途中（前半）で小さくなり、また元の大きさに戻ります。２回目は逆の方向へ進行中に要素の大きさが途中（中間位）で小さくなり、また元の大きさに戻ります、（normal）。（注：③と④が２回動くのは、①と②の trans アニメーションの animation-direction の値が alternate になっているからです。また、③と④で１回目と２回目の変化の速さが違うのは、trans アニメーションの animation-timing-function プロパティの値が ease-in で指定されているため、通常方向へ進行するときは ease-in、逆方向へ進行するときは ease-out になるので、その影響と③と④の自分の animation-timing-function プロパティの値が合成されるからです。）【Anime05Mix の説明】〔HTML の記述（Anime05Mix.html）〕 Anime05Normal.html の次の部分だけを変更した内容です。サンプルＣＳＳ５

(11)

href=" Anime05Mix.css"

〔CSS の記述（Anime05Mix.css）〕

animation-direction は animation-direction: alternate, reverse, normal;と指定しています。alternate があるので animation-iteration-count: 2;と指定しています。trans アニメーションは alternate なので通常方向へ進行した後、通常とは逆方向へ進行します。 colorChg アニメーションは reverse なので通常とは逆方向の進行が２回実行されます。 sizeChg アニメーションは normal なので通常方向の進行が２回実行されます。（colorChg と sizeChg は animation-iteration-count: 2;なので２回実行されます。）アニメーション名に対応するタイムライン（@keyframes）は Anime05.css と同じです。 #ballBox { top: 5px; left: 5px; width: 100px; height: 100px; border: solid 2px #000000; border-radius: 50%; background-color: red; position: absolute;

animation-direction: alternate, reverse, normal;

-webkit-animation-direction: alternate, reverse, normal;