CSS3によるアニメーション機能の動作のサンプル コードです。
実行結果：
|
|
HTML： Test.htm
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META http-equiv="content-language" content="ja">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>アニメーション効果</TITLE>
<STYLE>
.ImgAnime{ /* class：アニメーションCSS名 */
animation-name: Test; /* アニメーション動作名 */
animation-duration: 10s; /* アニメーション サイクルの動作時間 */
animation-iteration-count: 1; /* アニメーションの再生回数 */
}
@keyframes Test{ /* アニメーション動作定義 */
from{ /* アニメーションの開始でのスタイル */
opacity:0; /* 透明 */
}
10%{ /* アニメーション動作の10%でのスタイル */
opacity:1; /* 非透明 */
}
90%{
opacity:1;
}
to{ /* アニメーションの終了でのスタイル */
opacity:0;
}
}
.Gakubuti{ /* TABLE：額縁のスタイル */
border-spacing:0;
border:4px outset #c94;
}
#IdImgTitle{ /* TD：タイトル表示部 */
text-align:center;
background-color:#ddd;
}
#IdHaikei{ /* TD：額縁：背景のスタイル */
width:400px;
height:300px;
border:4px inset #c94;
background-color:#eee;
text-align:center;
vertical-align:middle;
}
#IdHaikei IMG{ /* 画像の基本スタイル */
opacity:0;
}
</STYLE>
</HEAD>
<BODY onload="ImgChange()">
<P>実行結果：
<TABLE class=Gakubuti>
<TR><TD id=IdImgTitle>
<TR><TD id=IdHaikei>
<IMG id=IdImg src="" onanimationend="ImgChange()">
</TABLE>
<SCRIPT>
var SrcList=[ //スライド画像のリストの作成（配列）
["Img/0.jpg","コメント0"],
["Img/1.jpg","コメント1"],
["Img/2.jpg","コメント2"],
["Img/3.jpg","コメント3"]
]
var SrcNum=0; //インデックス番号の初期化
function ImgChange(){
IdImg.className=""; //画像のclass名初期化
IdImg.src=SrcList[SrcNum][0]; //画像に画像ソース設定
IdImgTitle.innerHTML=SrcList[SrcNum][1]; //画像タイトル表示部にコメントを表示
window.setTimeout("ImgChange1()",1); //この処理の後にすぐにアニメーション動作させる
if(SrcNum < SrcList.length-1){ //スライドデータの配列インデックス番号：
SrcNum++; //…加算
}else{ //インデックス番号が最大値：
SrcNum=0; //最初にする
}
}
function ImgChange1(){
IdImg.className="ImgAnime"; //IMG要素にアニメーションを割り当てる
}
</SCRIPT>
</BODY>
</HTML>