動くCSS3海賊

mir.aculo.usのCreating awesome CSS3 animationsにおいて、CSS3を使った素晴らしいアニメーションの例としてFreelance Treasure Mapが紹介されている。Chrome、Chromium、SafariなどのWebKitベースのブラウザでアクセスするか、iPadまたはiPhoneからアクセスすると、ページ上部に掲載されている海賊のアニメーションを確認できる。

Freelance Treasure Mapに掲載されている海賊はCSS3の機能を使ってアニメーションするようになっており、地図をもった腕が上下に動くほか、帽子についている時計が反時計まわりに回っている。目は瞬きする仕組みになっている。この動作はCSS3の機能を使って実装されており、JavaScriptは使われていない。

CSS3の機能を使って実装しているものの、CSS3に対応していないブラウザであっても表示は崩れることなく表示される。後方互換を実現しつつ、CSS3に対応したブラウザでは最新機能を利用できるサンプルとして参考になる。使われているテクニックは次のとおり。

1. 上下に動く腕と地図

@-webkit-keyframes arm {
  from { -webkit-transform: rotate(0deg); }
  70% { -webkit-transform: rotate(9.7deg); }
  to { -webkit-transform: rotate(0deg); }
}
#arm {
  position:absolute;
  -webkit-transform-origin:0% 60%;
  -webkit-animation:arm 3.9s ease-in-out infinite alternate;
  left:360px;bottom:0;width:246px;height:210px;
  background:url(img/arm.png);
}

動いている腕と地図は透過PNG24の画像になっている。アニメーションは@-webkit-keyframesでフレームを指定して実現。-webkit-transform-origin:0% 60%;で回転軸を指定しているところと、-webkit-animation:でアニメーションを指定しているところがポイントとなる。

2. 回転する時計

@-webkit-keyframes pointer {
  from { -webkit-transform: rotate(0deg) scaleY(1); }
  25% { -webkit-transform: rotate(-90deg) scaleY(0.9); }
  50% { -webkit-transform: rotate(-180deg) scaleY(1); }
  75% { -webkit-transform: rotate(-270deg) scaleY(0.8); }
  to { -webkit-transform: rotate(-360deg) scaleY(1); }
}
#pointer1 {
  position:absolute;left:257px;top:177px;width:9px;height:23px;
  background:url(img/pointer1.png);
  -webkit-transform-origin:5.5px 18px;
  -webkit-animation:pointer 4s linear infinite;
}
#pointer2 {
  position:absolute;left:257px;top:177px;width:9px;height:23px;
  background:url(img/pointer1.png);
  -webkit-transform-origin:5.5px 18px;
  -webkit-animation:pointer 9s linear infinite;
}

回転する時計も、基本的には前述した上下に動く腕と同じテクニックが使われている。時計では長針と短針には同じ画像を使い回している。-webkit-animation:で秒数の指定を変えることで、あたかも長針と短針のように振る舞わせている。

時計でのポイントは、針の長さ(この場合はY軸方向の長さになっている)をscaleYでスケールさせている点にある。帽子の上の時計は真円ではなく楕円になっている。この楕円に合わせて針のサイズが変わるようになっており、この指定がよりファンシーな雰囲気を出している。

3. 瞬きする目

#eye {
  position:absolute;left:282px;top:269px;width:28px;height:26px;
  background:url(img/eye.gif);
}

瞬きする目にはアニメーションGIFが使われている。アニメーションGIFを背景画像に割り当てただけだ。

Creating awesome CSS3 animationsではFreelance Treasure Mapで使われている機能はいずれはすべてのブラウザがサポートすることになる機能であり、今このテクニックの採用をためらう必要はないと指摘している。