アニメーション効果

作成：2021.09.01 by T.A.、編集：2026.02.19

CSS3のアニメーション機能のサンプル動作です。

文字の背景色を変化させています。

実行結果→テスト

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">
<META name="description" content="アニメーション効果">
<TITLE>アニメーション効果</TITLE>
<STYLE>
#IdSpan{
  animation-name: Test;	/* アニメーション動作名 */
  animation-duration: 5s;	/* アニメーション サイクル動作時間 */
  animation-iteration-count: infinite;	/* 永遠に動作 */
}

@keyframes Test{	//アニメーション動作定義
 from{	/* 動作開始時 */
	background-color:#fff;
 }
 30%{
	background-color:#0f0;
 }
 60%{
	background-color:#f00;
 }
 to{	/* 動作終了時 */
	background-color:#fff;
 }
}
</STYLE>
</HEAD>

<BODY>

<P>実行結果→<SPAN id=IdSpan>テスト</SPAN>

</BODY>
</HTML>