safari4 betaで実装されたCSS Animationを使ってみました。 : アシアルブログ

2009/03/26 │カテゴリ： Tech　 CSS　 safari　 iPhone　 Animation　

safari4 betaで実装されたCSS Animationを使ってみました。

こんにちは。橋本です。

さて、今日は先日公開されたsafari4 betaで実装されたCSS Animationを使ってみたいと思います。（今回のサンプルはsafari4 beta、もしくはwebkitのnightlyビルドを使ってご覧ください）

CSS Animationとは何かと言いますと、文字通りCSSを使ってAnimation効果を表現する技術です。
まずこちらをご覧ください。

Falling Leaves 'Using CSS Animations and Transforms

これはwebkitの公式blogで紹介されていたサンプルなんですが、この美しく舞う落葉のアニメーション効果は全てCSSで定義されています。
では実際にどのようにアニメーション効果を定義するかを見ていきたいと思います。

まず、以下のように、キーフレームを定義します。
キーフレームの定義は、「@-webkit-keyframes」+「アニメーション名」で行います。

@-webkit-keyframes sample1 {
from {
top: 0px;
left: 0px;
animation-timing-function: ease-out;
-webkit-transform:rotate(-50deg);
background-color: #ffffff;
}
to {
top: 480px;
left: 320px;
animation-timing-function: ease-out;
-webkit-transform:rotate(50deg);
background-color: #000000;
}
}

キーフレームの中では、fromとtoという要素を用いて、アニメーションの始まりの状態と終わりの状態を定義します。
また、fromとtoの代わりに、「%」指定を用いて、経過時間毎の細かい変化を指定することもできます。

@-webkit-keyframes sample2 {
0% {
top: 0px;
left: 0px;
}
50% {
top: 100px;
left: 100px;
}
100% {
top: 200px;
left: 200px;
}
}

キーフレームで定義したアニメーションの状態については、一般的なcssのプロパティや「-webkit-transform」を用いた変化を指定出来る他、「animation-timing-function」という指定で、アニメーションの動きの速さの変化を定義することも出来ます。

これについては、ease、linear、ease-in、ease-out、ease-in-out、の四種類を既定値として指定出来る他、cubic-bezierという指定を用いて、独自の動きを定義することも出来ます。
animation-timing-functionについては、こちらのページが参考になります。

Cubic Bezier timing function

次に、定義したアニメーションを実際に使用する方法ですが、アニメーションを適用したい要素に対して、適用するアニメーション名や、オプションを指定していきます。

div {
-webkit-animation-name: sample; //アニメーション名
-webkit-animation-duration: 10s; //実行時間
-webkit-animation-iteration-count: 5; //実行回数
-webkit-animation-direction: alternate; //反復の有無
-webkit-animation-play-state: running; //実行状態
-webkit-animation-delay: 3s; //実行までの待ち時間
width: 100px;
height: 100px;
position: absolute;
}

「-webkit-animation-name」は適用するアニメーションの名前です。
「-webkit-animation-name: sample1, sample2, sample3;」といった形で複数指定することも可能です。

「-webkit-animation-duration」はアニメーションを実行する時間です。
キーフレームで指定した「%」指定はは、ここで定義する時間に対する割合になります。
デフォルト値は「０」となっており、「0」の場合にはアニメーションはは実行されません。

「-webkit-animation-iteration-count」はアニメーションの実行回数です。「infinite」と指定すると、回数無制限に実行します。

「-webkit-animation-direction」は反復の有無です。
デフォルト値は「normal」です。「alternate」と指定することによって、fromからto（0%から100%）までアニメーションを実行した後、toからfromに対して、再度アニメーションを行うように出来ます。

「-webkit-animation-play-state」は実行状態です。「running」と指定することで、アニメーションを実行状態にし、「paused」と指定することで停止状態にすることができます。
javascriptを使ってアニメーションを制御するときに使用するのかもしれませんが、正直使い勝手がいまいち分かっていません（すみません）。

「-webkit-animation-delay」は実行までの待ち時間です。ここで指定した時間の経過後、アニメーションが実行されます。

以上をふまえて簡単にサンプルを作ってみました。
safari4 betaをお持ちの方は是非実行してみてください。
（一応iPhoneでもアニメーションを表示することは出来るのですが、少し挙動不信です。出来ればsafari4 betaを使って見ていただけたらと思います。）

サンプル

コードはこちらです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
<title>shootingStar</title>
<style type="text/css" media="screen">
@-webkit-keyframes fall{
from {
top: -10px;
}
to {
top: 400px;
left: 300px;
}
}
@-webkit-keyframes fadeout{
0% { opacity: 0;}
25% { opacity: 1;}
70% { opacity: 0.1;}
100% { opacity: 0;}
}
@-webkit-keyframes rotate{
0% { -webkit-transform: rotate(-180deg);}
100% { -webkit-transform: rotate(180deg);}
}
#main {
background: #ffffff url(images/bg_machi.jpg);
width: 320px;
height: 480px;
}
#star > div {
position: absolute;
top: -50px;
-webkit-animation-name: fall, fadeout, rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in;
}
.shooting-star {
color: #ffff55;
font-size: 0.5em;
position: absolute;
}
#star1 {
left: -10px;
-webkit-animation-duration: 1.5s;
-webkit-animation-delay: 5s;
}
#star2 {
left: 30px;
-webkit-animation-duration: 2s;
-webkit-animation-delay: 2s;
}
#star3 {
left: 80px;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 4s;
}
#star4 {
left: 150px;
-webkit-animation-duration: 1.5s;
}
#star5 {
left: 200px;
-webkit-animation-duration: 2s;
-webkit-animation-delay: 5s;
}
</style>
</head>
<body>
<div id="main">
<div id='star'>
<?php for ($i = 1; $i < 5; $i++): ?>
<div id="star<?php echo $i ?>" class="shooting-star">★</div>
<?php endfor; ?>
</div>
</div>
</body>
</html>