"girl.css" を使ってアニメーションします。

girl.css ファイルを使って自動でアニメーションします。
単純なアニメーションは Animation GIF を使う方が簡単です。
  1. sumaho.css に続けて girl.css をリンクします。
    CSS(Cascading Style Sheets)とは、ウェブページのスタイルを指定するための言語です。
    Cascading は直列を意味し、一個だけでなく複数の CSS ファイルを直列にリンクすることが出来ます。
    重複して定義されたアイテムは後から定義されたものが優先されます。
    <link rel="stylesheet" href="sumaho.css" type="text/css">
<link rel="stylesheet" href="girl.css">
  2. HTML のソースコードは img class="girl" だけです。
    <body>
<img class="girl">
  3. 少女のアニメーションを定義した "girl.css" です。
    .girl
{
  width:128px;
  height:216px;
  margin:1em auto;
  overflow:hidden;
  background:url(girl.gif);
  animation:girl 1.0s steps(6,end) infinite;
}
@keyframes girl
{
  100% {background-position:-768px;}
}
  4. "girl.gif" は 128*216 の Sprite が横に７枚並んだ画像です。
    width, height で Sprite のサイズを設定します。
    1.0s(1.0 秒)がアニメーションを再生するスピードです。
    steps(6,end) が Sprite の最後の番号(７枚目)です。
    background-position:-768px; は７枚目の Sprite の左端座標です。
  5. 非常に簡単なソースですが、後は全て JavaScript が面倒を見てくれます。
    animation: の行を次のように修正して下さい。
    再生されるスピードを 2.0 秒にして、一度だけ実行します。
      animation:girl 2.0s steps(6,end);