JavaScriptjQuery
jQueryでCSSのtransform: rotate()を使った回転アニメーションする際のメモ

投稿 | | カテゴリー jQuery, CSS, JavaScript

回転のアニメーションを実現するだけのシンプルなjQueryプラグインもあるようですが、それだけのためにプラグイン読み込むのもイマイチなので、もっと簡単にCSSのtransitionを使って回転させます。

2016.9.17 追記
動かないコードが載っていたので削除して加筆修正しました。

jQueryのanimate()では、アニメーションさせるCSSのプロパティにtransformやショートハンドのような、ピクセルにうまく変換できない値を指定してもうまく動作しません。

// ピクセルにうまく変換できない値はアニメーションできない
$('.font-size').animate( { font: '25px/1.5 sans-serif' }, 1000 );// ショートハンド
$('.rotate').animate( { transform: 'rotate(-45deg)' }, 1000 );// transform

// フォントサイズなどはピクセルに変換できる値を指定する
$('.font-size').animate( { fontSize: '250%' }, 1000 );

animate()で対処するならオプション(第二引数)で、フレームごとに呼び出されるstepメソッドに回転アニメーションを行うコールバックを自前するのがてっとり早いかと思います。

$('.rotate').animate( { opacity: 1 }, {
  duration: 1000,
  step: function (now) {
    $(this).css({ transform: 'rotate(' + now * -45 + 'deg)' })
  }
});

コールバックの第一引数には、アニメーションする値の増減に合わせて0から1までの数値が渡されてきます。ちょうど半分のタイミングで0.5になります。

CSSのtransitionを使う

animate()ではstepを呼び出すためのrotate以外のアニメーションが必要なため、transformを使える環境を想定するのであれば、アニメーションにはまずtransitionを使う方が適切ではないかと考えます。

マウスが乗ると回転
.rotate { transform: rotate(0); transition: transform .5s; }
.rotate:hover { transform: rotate(180deg); }

transitionは、transition-propertytransition-durationtransition-timing-functiontransition-delayの値をショートハンドで一括指定できるプロパティです。

transition-property … トランジションの対象となるプロパティを指定します。初期値 = all
transition-duration … トランジションのスピードを指定します。初期値 = 0s
transition-timing-function … トランジションのイージングを指定します。初期値 = ease
transition-delay … トランジションの遅延を指定します。初期値 = 0s
各プロパティの値を複数指定するにはカンマ区切りを使いますが、ショートハンドで試したところうまく動作しませんでした。 CSS Transitions | W3C Working Draft

transitionを使えばJavaScript(jQuery)側は随分とラクです。

CSS
#rotate { transform: rotate(180deg); transition: transform .5s; }
#rotate.appeared { transform: rotate(0); }
jQuery
// ある程度スクロールされたら回転
var $window = $(window), $rotate = $('#rotate');
$window.on('scroll', function () {
  if ( ($window.scrollTop() + $window.height() * .8) < $rotate.offset().top) return;
  $rotate.addClass('appeared');
  $window.off('scroll', arguments.callee);
}).scroll();
スクロールによって回転

例では、ある程度スクロールされたら回転用のクラス名を追加するだけです。CSSの方は、実際にはブラウザの対応状況に合わせてベンダープレフィックス付きのプロパティも同時に指定した方がいいかもしれません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれないコメントは無視されますのでご注意ください。(スパム対策)