jQuery.CSS3Animate

download

jQuery.CSS3Animateは、CSSアニメーションをjQuery.animate()ライクに使うことを目的としたjQueryプラグインです。

9/24追記:プロパティの数値指定をできるようにしました。transform(2D)を指定できるようにしました。fadeIn/fadeOut/fadeToggleshow/hide/toggleslideDown/slideUp/slideToggleの各メソッドを追加しました。

library jQuery 1.8+ browser Chrome, Firefox, Safari(Mac, iOS), Android(Webkit), IE10+

基本的な使い方

$('.myanimate').CSS3Animate({
  'left': 400,
  'background-color': '#FFCE73'
}, 1000, 'easeInOutExpo');

デフォルト値を変更してからアニメーションを実行する

$('.myanimate').CSS3Animate('config', {
  duration: 1000,
  easing: 'easeOutBack'
}).CSS3Animate({
  'left': 400,
  'background-color': '#49A0A0'
});

アニメーション終了後にコールバック関数を実行する

$('.myanimate').CSS3Animate({
  'left': 400,
  'background-color': '#49A0A0'
}, 1000, 'easeInOutExpo', function() {
  ... // do something
});
※アニメーションが終了するとリセットされます。

連続してアニメーションする

アニメーションキューはスタックに追加され、再生中のアニメーションは停止しません。

$('#btn-myanimate').toggle(function() {
  $('.myanimate').CSS3Animate({
    'left': 400,
    'background-color': '#FFCE73'
  });
}, function() {
  $('.myanimate').CSS3Animate({
    'left': 0,
    'background-color': '#49A0A0'
  });
});
※ボタンを押した分のアニメーションが順番に実行されます。

再生中のアニメーションを停止して次のアニメーションを実行する

アニメーションキューはクリアされ、再生中のアニメーションは中断します。

$('#btn-myanimate').toggle(function() {
  $('.myanimate')
    .CSS3Animate('stop')
    .CSS3Animate({
      'left': 400,
      'background-color': '#FF7E73'
    });
}, function() {
  $('.myanimate')
    .CSS3Animate('stop')
    .CSS3Animate({
      'left': 0,
      'background-color': '#49A0A0'
    });
});
※ボタンを押すごとにアニメーションが変更されます。

transformプロパティ(2D)を使う

$('.myanimate').CSS3Animate({
  'transform': {
    'translate': [400, 0],
    'scale': 1.2,
    'rotate': 10,
    'skew': [5, 10]
  }
});
※ボタンを押すごとにアニメーションが変更されます。

フェードイン/フェードアウト

表示/非表示

スライドアップ/スライドダウン

リファレンス

CSS3Animate([props], [duration], [easing], [callback])

メインのアニメーション関数です。jQuery.animate() のように使用することができます。

<head>内にCSSアニメーションのためのスタイルを動的に追加することで動作します。

DOM要素にクラスを付加することでアニメーションを呼び出しているので、
IDセレクタでスタイルが指定されているとアニメーションが動かないことがあります。

CSS3Animate('config', [options])
デフォルト値を変更します。現在、durationeasingのデフォルト値が設定されています。
CSS3Animate('stop')
アニメーションを停止し、スタックされたキューをクリアします。
CSS3Animate('delay', [duration])
アニメーションの開始を遅延します。※現在stopとの併用はできません。
CSS3Animate('fadeIn', [duration], [easing], [callback])
要素をフェードインします。
CSS3Animate('fadeOut', [duration], [easing], [callback])
要素をフェードアウトします。
CSS3Animate('fadeToggle', [duration], [easing], [callback])
フェードイン/フェードアウトを交互に行います。
CSS3Animate('hide', [duration], [easing], [callback])
要素を縮小しながらフェードアウトします。
CSS3Animate('show', [duration], [easing], [callback])
要素を拡大しながらフェードインします。
CSS3Animate('toggle', [duration], [easing], [callback])
縮小しながらフェードアウト/拡大しながらフェードインを交互に行います。
CSS3Animate('slideDown', [duration], [easing], [callback])
要素の高さを変化させ表示します。
CSS3Animate('slideUp', [duration], [easing], [callback])
要素の高さを変化させ非表示にします。
CSS3Animate('slideToggle', [duration], [easing], [callback])
高さを変化させ表示/高さを変化させ非表示を交互に行います。

イージングについて

以下のイージングタイプをサポートしています。