1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値 ) とタイムライン (@keyframes) の名称を同じにする必要があります この仕様を応用して 上記のトリガーによりアニメーション名 (animation-name プロパティの値 ) にタイムライン (@keyframes) の名称をセットすることでアニメーションを開始させます web ページが表示されるのと同時に開始させる方法 animation を web ページが表示されるのと同時に開始させる方法は通常の指定方法で もっとも頻繁に使用されます アニメーション名 (animation-name プロパティの値 ) とタイムライン (@keyframes) の名称を同じにしておくことでアニメーションが自動的に開始されます ( ここでは animation の指定は animation ショートハンドプロパティで指定しています ) HTML の記述 <img id="image1" src="images/animeimage.png"> CSS の記述 #image1 { animation anime1 5s ease-in-out 0s infinite alternate; -webkit-animation: anime1 5s ease-in-out 0s infinite alternate; @keyframes anime1 { 0% { 100% { transform: translatex(480px); @-webkit-keyframes anime1 { 0% { 100% { -webkit-transform: translatex(480px); 1
サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCTYPE html> <html> <head> <title>animeauto</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animeauto.css"> </head> <body> <p> Animation のトリガー ( 自動 ) </p> <div id="stage"> <img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </body> </html> CSS の記述 (AnimeAuto.css) ピエロの玉乗りアニメーションが動くステージを指定します #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーシ 2
ョンは animation ショートハンドプロパティで指定しています #pierrot 画像については アニメーション名を pierrotanime 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate ( 往復 ) と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 20px; left: 15px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 20px; left: 15px; width: 88px; height: 117px; animation: pierrotanime 5s ease-in-out 0s infinite alternate; -webkit-animation: pierrotanime 5s ease-in-out 0s infinite alternate; @keyframes pierrotanime { 0% { 100% { transform: translatex(480px); @-webkit-keyframes pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については アニメーション名を ballanime 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 132px; left: 12px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 132px; left: 12px; width: 100px; height: 100px; animation: ballanime 5s ease-in-out 0s infinite alternate; -webkit-animation: ballanime 5s ease-in-out 0s infinite alternate; 3
@keyframes ballanime { 0% { 100% { transform: translatex(480px) rotatez(720deg); @-webkit-keyframes ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); マウスでクリック (click) して開始させる方法 マウスのクリックをトリガーとしてアニメーションを開始させることができます ここで は web ページに表示されたボタンをクリックするとアニメーションが動くようにします HTML の記述 id 属性で id 名 button を付けた div 要素には ボックスをマウスでクリックしたときにアニメーションが始まるように <div> タグに onclick="classname='startanime'" と記述します ( ここではクラス名 (classname) を 'startanime' と指定しています ) onclick=" classname=' startanime ' '' onclick は クリックした時 という意味で この後に =" " で クリックした時に実行する内容を記述します classname はクラス名の意味で この後に =' ' で 実際のクラス名を記述します " は onclick で使っているので ' を使います CSS に記述するクラス名 startanime を記述します ここだけ JavaScript を使用しています onclick の場合はマウスのクリックがトリガーとして1 回だけ機能します 2 回目以降のクリックは無効になります web ページが再読み込みされて表示されると再度マウスのクリックがトリガーとして有効になります <div id="button" onclick="classname='startaanime'">click <img id="image1" src="images/animeimage.png"> </div> 4
CSS の記述 #button の div 要素は 通常の指定をします #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; #image1 画像には animation-name プロパティの値を指定しません animation-name プロ パティの値がなければ アニメーションは実行されません タイムライン (@keyframes) の名称は anime1 と指定しておきます #image1 { animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite alternate; @keyframes anime1 { 0% { 100% { transform: translatex(480px); @-webkit-keyframes anime1 { 0% { 100% { -webkit-transform: translatex(480px); #button 要素がクリックされたときの動作を指定します #button の後に class セレクタ. +class 名.startAnime をスペースを空けずに続けて記述します その後にスペースを空けて #image1 を指定します 動作内容は #image1 画像の animation-name プロパティの値を anime1 に指定しています #button.startanime #image1 { animation-name: anime1; -webkit-animation-name: anime1; これによって #button 要素がクリックされると #image1 画像の animation プロパティの 指定に animation-name の値として anime1 が与えられて アニメーションが開始されます 5
onclick の代わりに 変化させる要素の上にマウスカーソルを乗せたとき (mouseover) 変 化させる要素の上でマウスボタンを押したとき (mousedown) 変化させる要素の上でマウ スボタンを上げたとき (mouseup) を使用することもできます サンプル CSS ボタンをクリックするとピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeTrigger1 の説明 HTML の記述 (AnimeTrigger1.html) div 要素に button という id を付けて onclick="classname='startamine'" を記述し 内容としてテキスト click ピエロの画像 玉の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCTYPE html> <html> <head> <title>animetrigger1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animetrigger1.css"> </head> <body> <p> Animation のトリガー </p> <div id="stage"> <div id="button" onclick="classname='startamine'"><font class="font1">click</font> <img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </div> </body> </html> CSS の記述 (AnimeTrigger1.css) ピエロの玉乗りアニメーションが動くステージを指定します 6
#stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; クリックするボタン #button を指定します 位置は top: 10px; left: 460px;(#stage 要素 の左上端を基準とする位置 ) で指定します #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーションは animation ショートハンドプロパティで指定しています #pierrot 画像については 位置を top: 10px; left: -445px;(#button 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 10px; left: -445px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 10px; left: -445px; width: 88px; height: 117px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite alternate; @keyframes pierrotanime { 0% { 100% { transform: translatex(480px); 7
@-webkit-keyframes pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 122px; left: -448px;(#button 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 122px; left: -448px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 122px; left: -448px; width: 100px; height: 100px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite alternate; @keyframes ballanime { 0% { 100% { transform: translatex(480px) rotatez(720deg); @-webkit-keyframes ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #button 要素がクリックされたときのボタンの変化を指定します #button 要素とテキスト を透明にして見えないようにしています #button.startamine { border: solid 1px rgba( 0, 0, 0, 0 ); background-color: rgba( 0, 0, 0, 0 ); #button.startamine.font1 { color: rgba( 0, 0, 0, 0 ); 8
#button 要素がクリックされたときの #pierrot 画像と #ball 画像の変化を指定します 内容 は #pierrot 画像の animation-name プロパティの値を pierrotanime に指定し #ball 画像 の animation-name プロパティの値を ballanime に指定しています #button.startamine #pierrot { animation-name: pierrotanime; -webkit-animation-name: pierrotanime; #button.startamine #ball { animation-name: ballanime; -webkit-animation-name: ballanime; 最後にテキストのフォントを指定しています.font1 { color: black; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 50px; マウスカーソルを乗せている (hover) 間だけ動かす方法 マウスカーソルを乗せている間だけをアニメーションを動かすことができます ここでは web ページに表示されたボタンを hover している間だけアニメーションが動くようにします HTML の記述 id 属性で id 名 button を付けた div 要素は ボックスの上にマウスを乗せている (hover) 間だけアニメーションが動くようにするので CSS の方に #button:hover の記述だけあれば HTML の <div> タグには id 名以外の記述は必要ありません hover の場合はマウスカーソルが乗るとトリガーとして機能します マウスカーソルが乗っている間はアニメーションが動きますが マウスカーソルが外れると元に戻ります <div id="button">hover <img id="image1" src="images/animeimage.png"> </div> 9
CSS の記述 #button の div 要素は 通常の指定をします #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; #image1 画像には animation-name プロパティの値を指定しません animation-name プロ パティの値がなければ アニメーションは実行されません タイムライン (@keyframes) の名称は anime1 と指定しておきます #image1 { animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite alternate; @keyframes anime1 { 0% { 100% { transform: translatex(480px); @-webkit-keyframes anime1 { 0% { 100% { -webkit-transform: translatex(480px); #button 要素にマウスカーソルが乗っているときの動作を指定します #button の後に擬似クラス :hover をスペースを空けずに続けて記述します その後にスペースを空けて #image1 を指定します 動作内容は #image1 画像の animation-name プロパティの値を anime1 に指定しています #button:hover #image1 { animation-name: anime1; -webkit-animation-name: anime1; これによって #button 要素にマウスカーソルが乗ると #image1 画像の animation プロパ 10
ティの指定に animation-name の値として anime1 が与えられ アニメーションが開始され ます サンプル CSS ボタンを hover するとピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeTrigger3 の説明 HTML の記述 (AnimeTrigger3.html) div 要素に button という id を付けて 内容としてテキスト click ピエロの画像 玉の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCTYPE html> <html> <head> <title>animetrigger3</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animetrigger3.css"> </head> <body> <p> Animation のトリガー </p> <div id="stage"> <div id="button"><font class="font1">hover</font> <img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </div> </body> </html> CSS の記述 (AnimeTrigger3.css) ピエロの玉乗りアニメーションが動くステージを指定します 11
#stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; hover するボタン #button を指定します 位置は top: 10px; left: 460px;(#stage 要素の 左上端を基準とする位置 ) で指定します #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーションは animation ショートハンドプロパティで指定しています #pierrot 画像については 位置を top: 10px; left: -445px;(#button 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 10px; left: -445px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 10px; left: -445px; width: 88px; height: 117px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite alternate; @keyframes pierrotanime { 0% { 12
100% { transform: translatex(480px); @-webkit-keyframes pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 122px; left: -448px;(#button 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 122px; left: -448px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 122px; left: -448px; width: 100px; height: 100px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite alternate; @keyframes ballanime { 0% { 100% { transform: translatex(480px) rotatez(720deg); @-webkit-keyframes ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #button 要素が hover されたときのボタンの変化を指定します #button 要素とテキストを 半透明にして薄く見えるようにしています #button:hover { border: solid 1px rgba( 0, 0, 0, 0.1 ); background-color: rgba( 255, 0, 0, 0.1 ); #button:hover.font1 { color: rgba( 0, 0, 0, 0.1 ); 13
#button 要素が hover されたときの #pierrot 画像と #ball 画像の変化を指定します 内容は #pierrot 画像の animation-name プロパティの値を pierrotanime に指定し #ball 画像の animation-name プロパティの値を ballanime に指定しています #button.startamine #pierrot { animation-name: pierrotanime; -webkit-animation-name: pierrotanime; #button.startamine #ball { animation-name: ballanime; -webkit-animation-name: ballanime; 最後にテキストのフォントを指定しています.font1 { color: black; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 50px; 14
animation-play-state プロパティを使用してアニメーションを動かす アニメーション名 (animation-name プロパティの値 ) のセットによりアニメーションを開始する方法以外に animation-play-state プロパティの値を paused から running に変更することによってアニメーションを開始することもできます hover と併せて使用すると アニメーションを途中で休止させたりすることができます サンプル CSS animation-play-state プロパティを使用してアニメーションを動かしてみましょう マウ スカーソルをボタンに乗せている (hover) 間はアニメーションが動き マウスカーソルを ボタンから外すとアニメーションが途中で休止します AnimeTrigger5 の説明 HTML の記述 (AnimeTrigger5.html) div 要素に button という id を付けて 内容としてテキスト click ピエロの画像 玉の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCTYPE html> <html> <head> <title>animetrigger5</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animetrigger5.css"> </head> <body> <p> Animation のトリガー </p> <div id="stage"> <div id="button"><font class="font1">hover</font> 15
<img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </div> </body> </html> CSS の記述 (AnimeTrigger5.css) ピエロの玉乗りアニメーションが動くステージを指定します #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; hover するボタン #button を指定します 位置は top: 10px; left: 460px;(#stage 要素の 左上端を基準とする位置 ) で指定します #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーシ ョンは animation ショートハンドプロパティで指定しています #pierrot 画像については 位置を top: 10px; left: -445px;(#button 要素の左上端を基 準とする位置 ) で指定します animation ショートハンドプロパティの指定については ア ニメーション名を pierrotanime 実行時間を 5s イージングは ease-in-out 開始待ち時 間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します animation-play-state プロパティは animation-play-state: paused; と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画 像の位置を top: 10px; left: -445px; から transform プロパティの translatex( ) 関数を 16
使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 10px; left: -445px; width: 88px; height: 117px; animation: pierrotanime 5s ease-in-out 0s infinite alternate; -webkit-animation: pierrotanime 5s ease-in-out 0s infinite alternate; animation-play-state: paused; -webkit-animation-play-state: paused; @keyframes pierrotanime { 0% { 100% { transform: translatex(480px); @-webkit-keyframes pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 122px; left: -448px;(#button 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を ballanime 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します animation-play-state プロパティは animation-play-state: paused; と指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 122px; left: -448px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 122px; left: -448px; width: 100px; height: 100px; animation: ballanime 5s ease-in-out 0s infinite alternate; -webkit-animation: ballanime 5s ease-in-out 0s infinite alternate; animation-play-state: paused; -webkit-animation-play-state: paused; @keyframes ballanime { 0% { 100% { transform: translatex(480px) rotatez(720deg); 17
@-webkit-keyframes ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #button 要素が hover されたときのボタンの変化を指定します #button 要素とテキストを 半透明にして薄く見えるようにしています #button:hover { border: solid 1px rgba( 0, 0, 0, 0.1 ); background-color: rgba( 255, 0, 0, 0.1 ); #button:hover.font1 { color: rgba( 0, 0, 0, 0.1 ); #button 要素が hover されたときの #pierrot 画像と #ball 画像の変化を指定します 内容は #pierrot 画像の animation-play-state プロパティの値を running に指定し #ball 画像の animation-play-state プロパティの値を running に指定しています #button:hover #pierrot { animation-play-state: running; -webkit-animation-play-state: running; #button:hover #ball { animation-play-state: running; -webkit-animation-play-state: running; 最後にテキストのフォントを指定しています.font1 { color: black; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 50px; 18
animation プロパティ全体を付加してアニメーションを動かす アニメーション名 (animation-name プロパティの値 ) のセットによる方法 animationplay-state プロパティの値を paused から running に変更する方法以外に 要素に animation プロパティ全体を付加することによってアニメーションを開始することもできます サンプル CSS animation プロパティ全体を付加してアニメーションを動かしてみましょう AnimeTrigger6 の説明 HTML の記述 (AnimeTrigger6.html) AnimeTrigger1.html の次の部分だけを変更した内容です <title> AnimeTrigger6</title> href=" AnimeTrigger6.css" div 要素に button という id を付けて onclick="classname='startamine'" を記述し 内容としてテキスト click ピエロの画像 玉の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます CSS の記述 (AnimeTrigger6.css) ピエロの玉乗りアニメーションが動くステージ #stage を指定します (AnimeTrigger1.css と同じです ) クリックするボタン #button を指定します (AnimeTrigger1.css と同じです ) ピエロの画像と玉の画像には animation プロパティの指定をしません #pierrot 画像については 位置を top: 10px; left: -445px;(#button 要素の左上端を基準とする位置 ) で指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 10px; left: -445px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります 19
#pierrot { top: 10px; left: -445px; width: 88px; height: 117px; @keyframes pierrotanime { 0% { 100% { transform: translatex(480px); @-webkit-keyframes pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 122px; left: -448px;(#button 要素の左上端を基準とする位置 ) で指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 122px; left: -448px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 122px; left: -448px; width: 100px; height: 100px; @keyframes ballanime { 0% { 100% { transform: translatex(480px) rotatez(720deg); @-webkit-keyframes ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #button 要素がクリックされたときのボタンの変化を指定します (AnimeTrigger1.css と 同じです ) #button 要素がクリックされたときの #pierrot 画像と #ball 画像の変化を指定します 内容 は #pierrot 画像に animation ショートハンドプロパティ全体を指定し アニメーション名 を pierrotanime 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返 しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します #ball 画像に animation ショートハンドプロパティ全体を指定し アニメーション名を 20
ballanime 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します #button.startamine #pierrot { animation: pierrotanime 5s ease-in-out 0s infinite alternate; -webkit-animation: pierrotanime 5s ease-in-out 0s infinite alternate; #button.startamine #ball { animation: ballanime 5s ease-in-out 0s infinite alternate; -webkit-animation: ballanime 5s ease-in-out 0s infinite alternate; 最後にテキストのフォントを指定しています (AnimeTrigger1.css と同じです ) 参考 : 背景をクリックまたは hover してアニメーションを動かす アニメーションを開始する方法としてボタンのクリックまたは hover を紹介してきました が ボタンではなく背景をクリックまたは hover して開始する方法を紹介します サンプル CSS 背景をクリックしてアニメーションを動かしてみましょう AnimeTrigger2 の説明 HTML の記述 (AnimeTrigger2.html) id が stage の div 要素に onclick="classname='startamine'" を記述し 内容として guide という id 名を付けてテキスト Click を内容とする div 要素 ピエロの画像 玉 の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball とい う id を付けておきます 21
<!DOCTYPE html> <html> <head> <title>animetrigger2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animetrigger2.css"> </head> <body> <p> Animation のトリガー </p> <div id="stage" onclick="classname='startamine'"> <div id="guide">click</div> <img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </body> </html> CSS の記述 (AnimeTrigger2.css) ピエロの玉乗りアニメーションが動くステージを指定します #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; Click というガイドテキストを指定します #guide { top: 50px; left: 50px; width: 500px; height: 150px; text-align: center; color: lightgray; font: bold 160px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 150px; cursor: default; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーシ ョンは animation ショートハンドプロパティで指定しています #pierrot 画像については 位置を top: 20px; left: 15px;(#stage 要素の左上端を基準と する位置 ) で指定します animation ショートハンドプロパティの指定については アニメ 22
ーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 20px; left: 15px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 20px; left: 15px; width: 88px; height: 117px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite alternate; @keyframes pierrotanime { 0% { 100% { transform: translatex(480px); @-webkit-keyframes pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 132px; left: 12px;(#stage 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 132px; left: 12px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 132px; left: 12px; width: 100px; height: 100px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite alternate; @keyframes ballanime { 0% { 100% { transform: translatex(480px) rotatez(720deg); 23
@-webkit-keyframes ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #stage 要素がクリックされたときの変化を指定します #guide 要素のテキストを透明にし て見えないようにしています #stage.startamine #guide { color: rgba( 0, 0, 0, 0 ); #stage 要素がクリックされたときの #pierrot 画像と #ball 画像の変化を指定します 内容 は #pierrot 画像の animation-name プロパティの値を pierrotanime に指定し #ball 画像 の animation-name プロパティの値を ballanime に指定しています #stage.startamine #pierrot { animation-name: pierrotanime; -webkit-animation-name: pierrotanime; #stage.startamine #ball { animation-name: ballanime; -webkit-animation-name: ballanime; 24
サンプル CSS 背景を hover してアニメーションを動かしてみましょう AnimeTrigger4 の説明 HTML の記述 (AnimeTrigger4.html) id が stage の div 要素には何も記述せず 内容として guide という id 名を付けてテキスト Hover を内容とする div 要素 ピエロの画像 玉の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCTYPE html> <html> <head> <title>animetrigger4</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animetrigger4.css"> </head> <body> <p> Animation のトリガー </p> <div id="stage"> <div id="guide">hover</div> <img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </body> </html> CSS の記述 (AnimeTrigger4.css) ピエロの玉乗りアニメーションが動くステージを指定します #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; Hover というガイドテキストを指定します 25
#guide { top: 50px; left: 50px; width: 500px; height: 150px; text-align: center; color: lightgray; font: bold 160px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 150px; cursor: default; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーションは animation ショートハンドプロパティで指定しています #pierrot 画像については 位置を top: 20px; left: 15px;(#stage 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 20px; left: 15px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 20px; left: 15px; width: 88px; height: 117px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite alternate; @keyframes pierrotanime { 0% { 100% { transform: translatex(480px); @-webkit-keyframes pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 132px; left: 12px;(#stage 要素の左上端を基準とす る位置 ) で指定します animation ショートハンドプロパティの指定については アニメー ション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します 26
アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 132px; left: 12px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 132px; left: 12px; width: 100px; height: 100px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite alternate; @keyframes ballanime { 0% { 100% { transform: translatex(480px) rotatez(720deg); @-webkit-keyframes ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #stage 要素が hover されたときの変化を指定します #guide 要素のテキストを透明にして 見えないようにしています #stage:hover #guide { color: rgba( 0, 0, 0, 0 ); #stage 要素が hover されたときの #pierrot 画像と #ball 画像の変化を指定します 内容は #pierrot 画像の animation-name プロパティの値を pierrotanime に指定し #ball 画像の animation-name プロパティの値を ballanime に指定しています #stage:hover #pierrot { animation-name: pierrotanime; -webkit-animation-name: pierrotanime; #stage:hover #ball { animation-name: ballanime; -webkit-animation-name: ballanime; 27