3_2 基本

CSS Animationsの基本を示します。

みの虫がそよ風に揺れるアニメーション
HTML

<div class="minomushi breeze"></div>

HTMLでは、<div>要素にclass属性を使って、”minomushi”クラスと”breeze”クラスを割り当てています。これにより、ブラウザがこのページを読み込んだとき、この<div>要素はminomushiクラスとbreezeクラスの要素として働くようになります。

CSS

.minomushi{
  width:84px;
  height: 193px;;
  margin:150px;
  /* 変換の基点は糸の先 */
  transform-origin: 39px top;
}

CSSのminomushiクラスでは、まず幅と高さを指定しています。これは下に示すminomushi.pngファイルの正味のサイズです。またアニメーションは、みの虫がぶら下がっている糸の先が中心（支点）になっているように見せたいので、transform-originプロパティを使って、回転の中心を糸の先に設定します。

breezeクラスでは、animationプロパティを使って、CSS Animationsを指定します。

.breeze{
 background: url("images/minomushi.png") no-repeat;
 animation: breeze 2s ease-in-out 3 alternate;
}

breeze 2s ease-in-out 3 alternateという指定は、次に定義するbreezeという名前のキーフレームアニメーションを使って、２秒を１周期として、ease-in-outという動きで、毎回反転するアニメーションを行う、ということを意味しています。

breezeキーフレームアニメーションは、次のように定義しています。

@keyframes breeze{
  0%{
    transform: rotate(20deg);
  }
  100%{
    transform: rotate(-20deg);
  }
}