サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を玉の画像に ball という id を付けておきます <!DOCT

(1)

1320 Animation のトリガー（開始させるきっかけ）の方法

animation を開始させるきっかけは、次の３つの方法があります。

①web ページが表示されるのと同時に開始させる方法

②マウスでクリック（click）して開始させる方法

③マウスカーソルを乗せている（hover）間だけ動かす方法

アニメーションを動かすためにはアニメーション名（animation-name プロパティの値）と

タイムライン（@keyframes）の名称を同じにする必要があります。この仕様を応用して、

上記のトリガーによりアニメーション名（animation-name プロパティの値）にタイムライ

ン（@keyframes）の名称をセットすることでアニメーションを開始させます。

●web ページが表示されるのと同時に開始させる方法

animation を web ページが表示されるのと同時に開始させる方法は通常の指定方法で、もっ

とも頻繁に使用されます。アニメーション名（animation-name プロパティの値）とタイム

ライン（@keyframes）の名称を同じにしておくことでアニメーションが自動的に開始され

ます。

（ここでは animation の指定は animation ショートハンドプロパティで指定していま

す。

）

〔HTML の記述〕

〔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); } }

(2)

web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう。

【AnimeAuto の説明】

〔HTML の記述（AnimeAuto.html）〕

ピエロの画像に「pierrot」という id を、玉の画像に「ball」という id を付けておきます。

〔CSS の記述（AnimeAuto.css）

〕

ピエロの玉乗りアニメーションが動くステージを指定します。

ピエロの画像と玉の画像は、それぞれ別のアニメーションとして指定します。アニメーシ

サンプルＣＳＳ

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

<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> #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; }

(3)

ョンは animation ショートハンドプロパティで指定しています。

#pierrot 画像については、アニメーション名を pierrotAnime、実行時間を 5s、イージング

は ease-in-out、開始待ち時間は 0s、繰り返しは infinite（永久）、実行方向は alternate

（往復）と指定します。

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

像の位置を top: 20px; left: 15px;から transform プロパティの translateX( )関数を使

用して X 方向へ 480px 移動させます。復路はこの逆の動きになります。

#ball 画像については、アニメーション名を ballAnime、実行時間を 5s、イージングは

ease-in-out、開始待ち時間は 0s、繰り返しは infinite（永久）

、実行方向は alternate（往

復）と指定します。

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

の位置を top: 132px; left: 12px;から transform プロパティの translateX( )関数を使用

して X 方向へ 480px 移動させながら rotateZ( )関数で時計回りに 720 度回転（２回転）さ

せます。復路はこの逆の動きになります。

#pierrot { top: 20px; left: 15px; width: 88px; height: 117px; position: absolute;

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 { top: 132px; left: 12px; width: 100px; height: 100px; position: absolute;

animation: ballAnime 5s ease-in-out 0s infinite alternate;

-webkit-animation: ballAnime 5s ease-in-out 0s infinite alternate; }

(4)

●マウスでクリック（click）して開始させる方法

マウスのクリックをトリガーとしてアニメーションを開始させることができます。ここで

は web ページに表示されたボタンをクリックするとアニメーションが動くようにします。

〔HTML の記述〕

id 属性で id 名 button を付けた div 要素には、ボックスをマウスでクリックしたときにア

ニメーションが始まるように<div>タグに

onClick="className='startAnime'"

と記述し

ます。

（ここではクラス名（className）を'startAnime'と指定しています。

）

onClick="

className='

startAnime

' ''

onClickは「クリックした時」という意味で、この後に=" "で、クリックした時に実行する内容を記述します。 classNameはクラス名の意味で、この後に=' 'で、実際のクラス名を記述します。「"」はonClickで使っているので、「'」を使います。 CSSに記述するクラス名 startAnime を記述します。

ここだけ JavaScript を使用しています。

onClick の場合はマウスのクリックがトリガーとして１回だけ機能します。２回目以降のク

リックは無効になります。web ページが再読み込みされて表示されると再度マウスのクリッ

クがトリガーとして有効になります。

<div id="button" onClick="className='startAanime'">Click <img id="image1" src="images/AnimeImage.png">

</div>

@keyframes ballAnime { 0% { }

100% { transform: translateX(480px) rotateZ(720deg); } }

@-webkit-keyframes ballAnime { 0% { }

100% { -webkit-transform: translateX(480px) rotateZ(720deg); } }

(5)

〔CSS の記述〕

#button の div 要素は、通常の指定をします。

#image1 画像には、animation-name プロパティの値を指定しません。animation-name プロ

パティの値がなければ、アニメーションは実行されません。タイムライン（@keyframes）

の名称は anime1 と指定しておきます。

#button 要素がクリックされたときの動作を指定します。#button の後に class セレクタ

「.」

＋class 名 .startAnime をスペースを空けずに続けて記述します。その後にスペースを空

けて#image1 を指定します。動作内容は、#image1 画像の animation-name プロパティの値

を anime1 に指定しています。

これによって、#button 要素がクリックされると、#image1 画像の animation プロパティの

指定に animation-name の値として anime1 が与えられて、

アニメーションが開始されます。

#button {

top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; position: absolute; }

#button.startAnime #image1 { animation-name: anime1;

-webkit-animation-name: 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); } }

(6)

onClick の代わりに、変化させる要素の上にマウスカーソルを乗せたとき（mouseover）

、変

化させる要素の上でマウスボタンを押したとき（mousedown）、変化させる要素の上でマウ

スボタンを上げたとき（mouseup）を使用することもできます。

ボタンをクリックするとピエロの玉乗りが動き出すアニメーションを作ってみましょう。

【AnimeTrigger1 の説明】

〔HTML の記述（AnimeTrigger1.html）

〕

div 要素に「button」という id を付けて、onClick="className='startAmine'"を記述し、

内容としてテキスト click、ピエロの画像、玉の画像を記述します。ピエロの画像に

「pierrot」という id を、玉の画像に「ball」という id を付けておきます。

〔CSS の記述（AnimeTrigger1.css）

〕

ピエロの玉乗りアニメーションが動くステージを指定します。

サンプルＣＳＳ

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

<body>

<p>■Animation のトリガー。</p> <div id="stage">

<div id="button" onClick="className='startAmine'"><font class="font1">Click</font>

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

(7)

クリックするボタン#button を指定します。位置は top: 10px; left: 460px;（#stage 要素

の左上端を基準とする位置）で指定します。

ピエロの画像と玉の画像は、それぞれ別のアニメーションとして指定します。アニメーシ

ョンは 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 移動させます。復路はこの逆の動きになります。

#stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; } #pierrot { top: 10px; left: -445px; width: 88px; height: 117px; position: absolute;

-webkit-animation: 5s ease-in-out 0s infinite alternate;

} @keyframes pierrotAnime { 0% { } 100% { transform: translateX(480px); } } #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; position: absolute; }

(8)

#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 度回転（２回転）

させます。復路はこの逆の動きになります。

#button 要素がクリックされたときのボタンの変化を指定します。#button 要素とテキスト

を透明にして見えないようにしています。

#ball { top: 122px; left: -448px; width: 100px; height: 100px; position: absolute;

}

#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 ); } @-webkit-keyframes pierrotAnime { 0% { } 100% { -webkit-transform: translateX(480px); } }

(9)

#button 要素がクリックされたときの#pierrot 画像と#ball 画像の変化を指定します。内容

は#pierrot 画像の animation-name プロパティの値を pierrotAnime に指定し、#ball 画像

の animation-name プロパティの値を ballAnime に指定しています。

最後にテキストのフォントを指定しています。

●マウスカーソルを乗せている（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> #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 "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 50px;

(10)

〔CSS の記述〕

#button の div 要素は、通常の指定をします。

#image1 画像には、animation-name プロパティの値を指定しません。animation-name プロ

パティの値がなければ、アニメーションは実行されません。タイムライン（@keyframes）

の名称は anime1 と指定しておきます。

#button 要素にマウスカーソルが乗っているときの動作を指定します。#button の後に擬似

クラス :hover をスペースを空けずに続けて記述します。その後にスペースを空けて

#image1 を指定します。動作内容は、#image1 画像の animation-name プロパティの値を

anime1 に指定しています。

これによって、#button 要素にマウスカーソルが乗ると、#image1 画像の animation プロパ

#button {

top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; position: absolute; }

#button:hover #image1 { animation-name: anime1;

-webkit-animation-name: anime1; }

#image1 {

-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); } }

(11)

ティの指定に animation-name の値として anime1 が与えられ、アニメーションが開始され

ます。

ボタンを hover するとピエロの玉乗りが動き出すアニメーションを作ってみましょう。

【AnimeTrigger3 の説明】

〔HTML の記述（AnimeTrigger3.html）

〕

div 要素に「button」という id を付けて、内容としてテキスト click、ピエロの画像、玉

の画像を記述します。ピエロの画像に「pierrot」という id を、玉の画像に「ball」とい

う id を付けておきます。

〔CSS の記述（AnimeTrigger3.css）

〕

ピエロの玉乗りアニメーションが動くステージを指定します。

サンプルＣＳＳ

<body>

<div id="button"><font class="font1">Hover</font>

(12)

hover するボタン#button を指定します。位置は top: 10px; left: 460px;（#stage 要素の

左上端を基準とする位置）で指定します。

ピエロの画像と玉の画像は、それぞれ別のアニメーションとして指定します。アニメーシ

ョンは 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 移動させます。復路はこの逆の動きになります。

#stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; } #pierrot { top: 10px; left: -445px; width: 88px; height: 117px; position: absolute;

} @keyframes pierrotAnime { 0% { } #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; position: absolute; }

(13)

#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 度回転（２回転）

させます。復路はこの逆の動きになります。

#button 要素が hover されたときのボタンの変化を指定します。#button 要素とテキストを

半透明にして薄く見えるようにしています。

#ball { top: 122px; left: -448px; width: 100px; height: 100px; position: absolute;

}

#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 ); } 100% { transform: translateX(480px); } } @-webkit-keyframes pierrotAnime { 0% { } 100% { -webkit-transform: translateX(480px); } }

(14)

#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;

(15)

【animation-play-state プロパティを使用してアニメーションを動かす】

アニメーション名（animation-name プロパティの値）のセットによりアニメーションを開

始する方法以外に、animation-play-state プロパティの値を paused から running に変更す

ることによってアニメーションを開始することもできます。hover と併せて使用すると、ア

ニメーションを途中で休止させたりすることができます。

animation-play-state プロパティを使用してアニメーションを動かしてみましょう。マウ

スカーソルをボタンに乗せている（hover）間はアニメーションが動き、マウスカーソルを

ボタンから外すとアニメーションが途中で休止します。

【AnimeTrigger5 の説明】

〔HTML の記述（AnimeTrigger5.html）

〕

div 要素に「button」という id を付けて、内容としてテキスト click、ピエロの画像、玉

の画像を記述します。ピエロの画像に「pierrot」という id を、玉の画像に「ball」とい

う id を付けておきます。

サンプルＣＳＳ

<body>

(16)

〔CSS の記述（AnimeTrigger5.css）

〕

ピエロの玉乗りアニメーションが動くステージを指定します。

hover するボタン#button を指定します。位置は top: 10px; left: 460px;（#stage 要素の

左上端を基準とする位置）で指定します。

ピエロの画像と玉の画像は、それぞれ別のアニメーションとして指定します。アニメーシ

ョンは 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( )関数を

#stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; } #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; position: absolute; }

(17)

使用して X 方向へ 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 度回転（２回転）

させます。復路はこの逆の動きになります。

#pierrot { top: 10px; left: -445px; width: 88px; height: 117px; position: absolute;

-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; width: 100px; height: 100px; position: absolute;

-webkit-animation: ballAnime 5s ease-in-out 0s infinite alternate; animation-play-state: paused; -webkit-animation-play-state: paused; } @keyframes ballAnime { 0% { }

(18)

#button 要素が hover されたときのボタンの変化を指定します。#button 要素とテキストを

半透明にして薄く見えるようにしています。

#button 要素が hover されたときの#pierrot 画像と#ball 画像の変化を指定します。内容は

#pierrot 画像の animation-play-state プロパティの値を running に指定し、#ball 画像の

animation-play-state プロパティの値を running に指定しています。

最後にテキストのフォントを指定しています。

#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 { animation-play-state: running; -webkit-animation-play-state: running; } #button:hover #ball { animation-play-state: running; -webkit-animation-play-state: running; } .font1 { color: black;

} }

(19)

【animation プロパティ全体を付加してアニメーションを動かす】

アニメーション名（animation-name プロパティの値）のセットによる方法、animation-

play-state プロパティの値を paused から running に変更する方法以外に、

要素に animation

プロパティ全体を付加することによってアニメーションを開始することもできます。

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 移動させます。復路はこの逆の動きになります。

(20)

#ball 画像については、位置を top: 122px; left: -448px;（#button 要素の左上端を基準

とする位置）で指定します。

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

の位置を top: 122px; left: -448px;から transform プロパティの translateX( )関数を使

用して X 方向へ 480px 移動させながら rotateZ( )関数で時計回りに 720 度回転（２回転）

させます。復路はこの逆の動きになります。

#button 要素がクリックされたときのボタンの変化を指定します。（AnimeTrigger1.css と

同じです。

）

#button 要素がクリックされたときの#pierrot 画像と#ball 画像の変化を指定します。内容

は#pierrot 画像に animation ショートハンドプロパティ全体を指定し、アニメーション名

を pierrotAnime、実行時間を 5s、イージングは ease-in-out、開始待ち時間は 0s、繰り返

しは infinite（永久）

、実行方向は alternate（往復）と指定します。

#ball 画像に animation ショートハンドプロパティ全体を指定し、アニメーション名を

#pierrot { top: 10px; left: -445px; width: 88px; height: 117px; position: absolute; } @keyframes pierrotAnime { 0% { } 100% { transform: translateX(480px); } } @-webkit-keyframes pierrotAnime { 0% { } 100% { -webkit-transform: translateX(480px); } } #ball { top: 122px; left: -448px; width: 100px; height: 100px; position: absolute; } @keyframes ballAnime { 0% { }

(21)

ballAnime、実行時間を 5s、イージングは ease-in-out、開始待ち時間は 0s、繰り返しは

infinite（永久）、実行方向は alternate（往復）と指定します。

最後にテキストのフォントを指定しています。

（AnimeTrigger1.css と同じです。

）

〔参考：背景をクリックまたは hover してアニメーションを動かす。〕

アニメーションを開始する方法としてボタンのクリックまたは hover を紹介してきました

が、ボタンではなく背景をクリックまたは hover して開始する方法を紹介します。

背景をクリックしてアニメーションを動かしてみましょう。

【AnimeTrigger2 の説明】

〔HTML の記述（AnimeTrigger2.html）

〕

id が「stage」の div 要素に onClick="className='startAmine'"を記述し、内容として、

「guide」という id 名を付けてテキスト Click を内容とする div 要素、ピエロの画像、玉

の画像を記述します。ピエロの画像に「pierrot」という id を、玉の画像に「ball」とい

う id を付けておきます。

#button.startAmine #pierrot {

-webkit-animation: pierrotAnime 5s ease-in-out 0s infinite alternate;

}

#button.startAmine #ball {

-webkit-animation: ballAnime 5s ease-in-out 0s infinite alternate;

}

(22)

〔CSS の記述（AnimeTrigger2.css）

〕

ピエロの玉乗りアニメーションが動くステージを指定します。

Click というガイドテキストを指定します。

ピエロの画像と玉の画像は、それぞれ別のアニメーションとして指定します。アニメーシ

ョンは animation ショートハンドプロパティで指定しています。

#pierrot 画像については、位置を top: 20px; left: 15px;（#stage 要素の左上端を基準と

する位置）で指定します。animation ショートハンドプロパティの指定については、

アニメ

<body>

<p>■Animation のトリガー。</p>

<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> #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; } #guide { top: 50px; left: 50px; width: 500px; height: 150px; text-align: center; color: lightgray;

cursor: default; position: absolute; }

(23)

ーション名を指定しない

で、実行時間を 5s、イージングは ease-in-out、開始待ち時間は

0s、繰り返しは infinite（永久）

、実行方向は alternate（往復）と指定します。

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

像の位置を top: 20px; left: 15px;から transform プロパティの translateX( )関数を使

用して X 方向へ 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 度回転（２回転）さ

せます。復路はこの逆の動きになります。

#pierrot { top: 20px; left: 15px; width: 88px; height: 117px; position: absolute;

} @keyframes pierrotAnime { 0% { } 100% { transform: translateX(480px); } } @-webkit-keyframes pierrotAnime { 0% { } 100% { -webkit-transform: translateX(480px); } } #ball { top: 132px; left: 12px; width: 100px; height: 100px; position: absolute;

}

(24)

#stage 要素がクリックされたときの変化を指定します。#guide 要素のテキストを透明にし

て見えないようにしています。

#stage 要素がクリックされたときの#pierrot 画像と#ball 画像の変化を指定します。内容

は#pierrot 画像の animation-name プロパティの値を pierrotAnime に指定し、#ball 画像

の animation-name プロパティの値を ballAnime に指定しています。

}

100% { -webkit-transform: translateX(480px) rotateZ(720deg); } } #stage.startAmine #guide { color: rgba( 0, 0, 0, 0 ); } #stage.startAmine #pierrot { animation-name: pierrotAnime; -webkit-animation-name: pierrotAnime; } #stage.startAmine #ball { animation-name: ballAnime; -webkit-animation-name: ballAnime; }

(25)

背景を hover してアニメーションを動かしてみましょう。

【AnimeTrigger4 の説明】

〔HTML の記述（AnimeTrigger4.html）

〕

id が「stage」の div 要素には何も記述せず、内容として、

「guide」という id 名を付けて

テキスト Hover を内容とする div 要素、ピエロの画像、玉の画像を記述します。ピエロの

画像に「pierrot」という id を、玉の画像に「ball」という id を付けておきます。

〔CSS の記述（AnimeTrigger4.css）

〕

ピエロの玉乗りアニメーションが動くステージを指定します。

Hover というガイドテキストを指定します。

サンプルＣＳＳ

<body>

<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> #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; }

(26)

ピエロの画像と玉の画像は、それぞれ別のアニメーションとして指定します。アニメーシ

ョンは 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 移動させます。復路はこの逆の動きになります。

#ball 画像については、位置を top: 132px; left: 12px;（#stage 要素の左上端を基準とす

る位置）で指定します。animation ショートハンドプロパティの指定については、

アニメー

ション名を指定しない

で、実行時間を 5s、イージングは ease-in-out、開始待ち時間は 0s、

繰り返しは infinite（永久）

、実行方向は alternate（往復）と指定します。

#guide { top: 50px; left: 50px; width: 500px; height: 150px; text-align: center; color: lightgray;

font: bold 160px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 150px; cursor: default; position: absolute; } #pierrot { top: 20px; left: 15px; width: 88px; height: 117px; position: absolute;

} @keyframes pierrotAnime { 0% { } 100% { transform: translateX(480px); } } @-webkit-keyframes pierrotAnime { 0% { } 100% { -webkit-transform: translateX(480px); } }

(27)

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

の位置を top: 132px; left: 12px;から transform プロパティの translateX( )関数を使用

して X 方向へ 480px 移動させながら rotateZ( )関数で時計回りに 720 度回転（２回転）さ

せます。復路はこの逆の動きになります。

#stage 要素が hover されたときの変化を指定します。#guide 要素のテキストを透明にして

見えないようにしています。

#stage 要素が hover されたときの#pierrot 画像と#ball 画像の変化を指定します。内容は

#pierrot 画像の animation-name プロパティの値を pierrotAnime に指定し、#ball 画像の

animation-name プロパティの値を ballAnime に指定しています。

#ball { top: 132px; left: 12px; width: 100px; height: 100px; position: absolute;

}

100% { -webkit-transform: translateX(480px) rotateZ(720deg); } } #stage:hover #guide { color: rgba( 0, 0, 0, 0 ); } #stage:hover #pierrot { animation-name: pierrotAnime; -webkit-animation-name: pierrotAnime; } #stage:hover #ball { animation-name: ballAnime; -webkit-animation-name: ballAnime; }