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

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

タグ [　 Tech　 CSS　 safari　 iPhone　 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」+「アニメーション名」で行います。

  1. @-webkit-keyframes sample1 {
  2.   from {
  3.     top: 0px;
  4.     left: 0px;
  5.     animation-timing-function: ease-out;
  6.     -webkit-transform:rotate(-50deg);
  7.     background-color: #ffffff;
  8.   }
  9.  
  10.   to {
  11.     top: 480px;
  12.     left: 320px;
  13.     animation-timing-function: ease-out;
  14.     -webkit-transform:rotate(50deg);
  15.     background-color: #000000;
  16.   }
  17. }

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

  1. @-webkit-keyframes sample2 {
  2.   0% {
  3.     top: 0px;
  4.     left: 0px;
  5.   }
  6.  
  7.   50% {
  8.     top: 100px;
  9.     left: 100px;
  10.   }
  11.   
  12.   100% {
  13.     top: 200px;
  14.     left: 200px;
  15.   }
  16. }

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

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

Cubic Bezier timing function

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

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

「-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を使って見ていただけたらと思います。）

サンプル

コードはこちらです。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
  3.   <head>
  4.     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5.     <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
  6.     <title>shootingStar</title>
  7.     <style type="text/css" media="screen">
  8.       @-webkit-keyframes fall{
  9.         from {
  10.           top: -10px;
  11.         }
  12.         to {
  13.           top: 400px;
  14.           left: 300px;
  15.         }
  16.       }
  17.     
  18.       @-webkit-keyframes fadeout{
  19.         0% { opacity: 0;}
  20.         25% { opacity: 1;}
  21.         70% { opacity: 0.1;}
  22.         100% { opacity: 0;}
  23.       }
  24.     
  25.       @-webkit-keyframes rotate{
  26.         0% { -webkit-transform: rotate(-180deg);}
  27.         100% { -webkit-transform: rotate(180deg);}
  28.       }
  29.     
  30.       #main {
  31.         background: #ffffff url(images/bg_machi.jpg);
  32.         width: 320px;
  33.         height: 480px;
  34.       }
  35.  
  36.       #star > div {
  37.         position: absolute;
  38.         top: -50px;
  39.         -webkit-animation-name: fall, fadeout, rotate;
  40.         -webkit-animation-iteration-count: infinite;
  41.         -webkit-animation-direction: normal;
  42.         -webkit-animation-timing-function: ease-in;
  43.       }
  44.     
  45.       .shooting-star {
  46.         color: #ffff55;
  47.         font-size: 0.5em;
  48.         position: absolute;  
  49.       }
  50.     
  51.       #star1 {
  52.         left: -10px;
  53.         -webkit-animation-duration: 1.5s;
  54.         -webkit-animation-delay: 5s;
  55.       }
  56.  
  57.       #star2 {
  58.         left: 30px;
  59.       -webkit-animation-duration: 2s;
  60.       -webkit-animation-delay: 2s;  
  61.       }
  62.     
  63.       #star3 {
  64.         left: 80px;
  65.         -webkit-animation-duration: 1s;
  66.         -webkit-animation-delay: 4s;
  67.       }
  68.     
  69.       #star4 {
  70.         left: 150px;
  71.         -webkit-animation-duration: 1.5s;  
  72.       }
  73.     
  74.       #star5 {
  75.         left: 200px;
  76.         -webkit-animation-duration: 2s;
  77.         -webkit-animation-delay: 5s;
  78.       }
  79.     </style>
  80.   </head>
  81.   <body>
  82.     <div id="main">
  83.       <div id='star'>
  84.         <?php for ($i = 1; $i < 5; $i++): ?> 
  85.             <div id="star<?php echo $i ?>" class="shooting-star">★</div>
  86.         <?php endfor; ?>
  87.       </div>
  88.     </div>
  89.   </body>
  90. </html>

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

コメントフォーム

認証
captcha_key
 

トラックバック

トラックバックURI :

最近の記事