パラパラアニメーション


【"css_girl.html" Source Code】
<head>
<meta charset="UTF-16">
<title>Parapara Animation</title>
<link rel="stylesheet" href="girl.css">
</head>

<body>
<h2>パラパラアニメーション</h2>
<img class="girl">

このページは Internet Explorer11 で実行を確認しました。
2017/09/12 Microsoft Edge でも実行を確認しました。
実行環境によっては、動かないかも知れません。 (^_^;)

css_girl.html では link で "girl.css" をリンクします。
"girl.css" は css_girl.html と同じフォルダに格納して下さい。
"../img/girl.gif" は 128*216 の Sprite が横に7枚並んだ画像です。
「超初心者のプログラム入門(C#)」「C# Direct Draw 入門」「Direct Draw でアニメーション」から画像を取得することが出来ます。
width, height で Sprite のサイズを設定します。
1.0 秒がアニメーションを再生するスピードです。
steps(6,end) が Sprite の最後の番号(7枚目)です。
background-position:-768px; は7枚目の Sprite の左端座標です。
非常に簡単なソースですが、後は全て JavaScript が面倒を見てくれます。
【"girl.css" Source Code】
.girl
{
  width:128px;
  height:216px;
  margin:1em auto;
  overflow:hidden;
  background:url(../img/girl.gif);
  animation:girl 1.0s steps(6,end) infinite;
}
@keyframes girl
{
  100% {background-position:-768px;}
}

animation: の行を次のように修正して下さい。
再生されるスピードを 2.0 秒にして、一度だけ実行します。
  animation:girl 2.0s steps(6,end);

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)