アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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」となっており、「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>


javascriptと上手く組み合わせれば、さらに複雑で面白いアニメーション効果を作ることも出来ると思います。
皆さんも是非試してみてください。