CSSTransitions
2009-08-09 (日) 20:19:00 (217d)

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

CSSTransitions 　

-webkit-transition 　

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

    [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> [, [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]]*

-webkit-transition-property 　

  • 変化させるプロパティ名。複数記述できます。

    none | all | [ <IDENT> ] [ ',' <IDENT> ]*

    -webkit-transition-property: opacity, left;
-webkit-transition-property: all;
-webkit-transition-property: -webkit- transform, opacity;

-webkit-transition-duration 　

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

    <time> [, <time>]*

-webkit-transition-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)と同等
  • いわゆるベジェ曲線での指定になるのですが、実感が湧かない方は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-transition-delay 　

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

    <time> [, <time>]*

Transition Events 　

  • アニメーション終了の検出を行います。
  • iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。

    webkitTransitionEnd?

    box.addEventListener( 'webkitTransitionEnd', function( event ) { alert( "Finished transition!" ); }, false );

CSSTransitionsのサンプル 　

タッチ（クリック）されると縦に180度回転する記述例 　

  • アニメーション効果を1.5秒間、対象プロパティを「-webkit-transform」として実行。変化させるプロパティとして指定されている「-webkit-transform」では、rotateY180degで縦方向に180度、3D描画されます。
  • JavaScript 
    function toggle(event) {
var e = event.currentTarget;
e.className = (e.className == 'card') ? 'card flipped' : 'card';
}
  • CSS 
    .card {
-webkit-transform-style: preserve-3d;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1.5s;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
}

注意点 　

  • PC用Safariと同じようにOn Clickイベントに直接スタイル指定を書いても、うまく動作しない。※iPhoneのMobileSafariは、on clickは限定サポート（ツールチップ様のものが動作）、hoverはサポートしない。
    On Clickイベントではスタイル切り替えの関数を呼び出し、そこでトグル動作をさせたいCSSを切り替え指定すればよい。

参考サイト 　

Webkit.org 　

Safari CSS Reference 　

The Art of Web ~ CSS 　

GirlieMac! Blog | More Update on CSS Animation 　




スポンサード　リンク