CSSAnimations
2009-08-09 (日) 20:19:00 (221d)

lifebuoy.png CSS3により定義されている「CSS Animations」についてかんたんにまとめます。

CSSAnimations 　

-webkit-animation 　

  • name duration timing_function delay iteration_countのすべてを一度に記述します。

    name duration timing_function delay iteration_count direction [, ... ];

-webkit-animation-name 　

  • @keyframesで定義するアニメーションキーフレーム情報の名前を指定します。

    name [, ...]

    animation-name: 'slidesample';

-webkit-animation-duration 　

  • アニメーション効果が発動している時間の指定。's'で秒数、'ms'でミリ秒の指定。

    time [, ...]

-webkit-animation-timing-function 　

  • アニメーション効果の変化するタイミングの指定 
    ease：cubic-bezier(0.25, 0.1, 0.25, 1.0)と同等
linear：cubic-bezier(0.0, 0.0, 1.0, 1.0)と同等
ease-in：cubic-bezier(0.42, 0, 1.0, 1.0)と同等
ease-out：cubic-bezier(0, 0, 0.58, 1.0)と同等
ease-in-out：cubic-bezier(0.42, 0, 0.58, 1.0)と同等
  • 他に、Visual Effects Timing Functionsのcubic-bezierも指定可能です。
  • いわゆるベジェ曲線での指定になるのですが、実感が湧かない方はThe Art of Web ~ CSS: Transition Timing Functionsの動作サンプルを見れば一目瞭然でしょう。

    ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

-webkit-animation-iteration-count 　

  • アニメーションの繰り返し回数を指定します。

    number [, ...]

-webkit-animation-direction 　

  • アニメーションdirectionを指定します。逆方向を指定することでキーフレーム指定を逆から実行します。またこの時、「ease-in」指定の場合には「ease-out」として実行されます。

    normal | alternate [, normal | alternate]*

-webkit-animation-play-state 　

  • play-stateを指定します。通常はrunning状態ですが、pausedをセットすることでアニメーションが一時停止します。

    running | paused [, running | paused]*

-webkit-animation-delay 　

  • アニメーションを開始するまでの時間指定。's'で秒数、'ms'でミリ秒の指定。

    time [, ...];

@keyframes '*animation-name*' 　

  • CSS Rulesの指定。Safariでは-webkit-keyframesでの一括指定が可能。

    keyframes-rule: '@-webkit-keyframes' [ IDENT | STRING ] '{'keyframes-blocks '}';
    keyframes-blocks: [ keyframe-selectors block ]* ;
    keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' ['from' | 'to' | PERCENTAGE ] ]*;

  • webkit-animation-nameで指定するキーフレーム定義を行います。
  • 下記の例では、指定要素のleftとtopを0から100まで変化させるキーフレーム「slidesample」の定義を行っています。 
    @-webkit-keyframes 'slidesample' {
 from {
   left: 0;
   top: 0;
 }
 to {
   left: 100px;
   top: 100px;
 }
}
  • 下記の例では、パーセント指定で遷移を定義しています。 
    @-webkit-keyframes 'percent' {
0% {
 opacity:0;
}
50% {
 opacity:0.5;
}
100% {
 opacity:1;
}
}

Visual Effects Timing Functions 　

cubic-bezier 　

  • webkit-animation-timing-functionで指定できます。

    cubic-bezier(P1x,P1y,P2x,P2y)

    P1x, P1y:First point in the Bézier curve.
P2x, P2y:Second point in the Bézier curve.

Animation Events 　

  • アニメーション開始、繰り返し（the end of each iteration）、終了の検出を行います。
  • iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。

    webkitAnimationStart?

    webkitAnimationEnd?

    webkitAnimationIteration?

    function attachEventHandler() {
  box.addEventListener( 'webkitAnimationEnd', function( event ) { alert( "Finished animation!" ); }, false );
}

CSSAnimations記述サンプル 　

  • 下の例では「<strong>やや回転したまま中央に移動しながら透明度を減少させた後、中央全面にまっすぐせり出てくる</strong>」アニメーションを指定しています。前提としてアニメーションする要素はすべて'Div1'~'Divn'という要素で括られている状態とします。
  • 記述例CSS 
    @-webkit-keyframes 'LtC' {
0% {
 -webkit-transform: perspective(800) translate3d(-490px, 0px, -800px) rotateY(30deg);
 -webkit-animation-timing-function: ease-out;
 opacity:0;
}
50% {
 -webkit-transform: perspective(800) translate3d(-50px, 0px, -100px) rotateY(0deg);
 opacity:1;
}
100% {
 -webkit-transform: perspective(800) translate3d(10px, 0px, 0px) rotateY(0deg);
 left:10px;
}
}
  • この'LtC'を、CSSの中で要素に指定するための再定義を行った上で 
    .divLtC {
-webkit-animation-name:'LtC';
-webkit-animation-duration:0.5s;
}
  • 最後に、JavaScriptで 
    $('Div'+divOut).className = 'divCtR';
    などとしてhtml要素に指定することでアニメーションが動くことになります。

サンプルの注意点 　

  • 実際には、これは新しく中央に表示される要素への指定であり、それ以前に現在表示中の要素をまず画面の外に退場いただくためのCSS定義とJavaScript指定が必要になります。
  • さらにLtCという名前でピンと来た方もいらっしゃるでしょうがこれは左から右にフリックした場合のアニメです。ということは、右から左にフリックさせた場合の新しい要素の表示動作、古い要素の退場動作もそれぞれ必要になってきますね。
  • さらに左右端の考慮（iPhone標準UIでは"ちょっと行きすぎてから戻って"きます）も必要です。つまり左右だけで6動作の規定が必要ということです。おまけにランドスケープ（横画面）を考慮すれば×2です。ちょっとクラクラっとしますね。
  • ※さらに困ったことにiPhoneのMobileSafariでは、アニメーションが終了後に最初の位置に巻き戻るという変な動作があるため、「style.left」等で最終位置をセッティングしてあげる必要もあったりします。このあたりは実際に何度か触っているとわかって来ます。

参考サイト 　

Webkit.org 　

Safari CSS Reference 　




スポンサード　リンク