今回は、jQueryのanimate()に比べて高速で高機能なプラグイン「Velocity.js」から、
前回の記事で取り上げられなかった項目について調べてみました。

■Velocity.js（公式/記事作成時最新バージョン 1.2.3）
http://julian.com/research/velocity/
■GitHub
https://github.com/julianshapiro/velocity

前回の記事でも触れましたが、
Velocity.jsの基本的な書式は下記のようになっています。

これは jQueryの animate() の書式と同じですが、
Velocity.jsでは、上記の書式のpropertiesの箇所に、
jQueryのanimate()では指定できないプロパティを、新たにプラグインを読み込むことなく使用することができます。

Transforms（CSS3の変形プロパティ）

Velocity.jsで使用できるプロパティの例として、
CSS3のtransforms があります。

CSS3のtransformsは、
回転 (rotate)、傾斜 (skew)、拡大縮小 (scale)、平行移動 (translate)を指定するためのプロパティです。

jQueryの animate() と同様に、プロパティ名はキャメルケースで指定します。
どのようなプロパティ名が使用できるかは、公式サイトの「CSS Support」欄にまとめられています。
（Transforms関連以外のプロパティも含まれます。）

▼使用できるプロパティは公式サイトをご確認ください。





▼Velocity.jsでCSS3のtransformsを扱うサンプル

See the Pen Velocity.js & CSS transforms by TAM-hiroaki (@TAM-hiroaki) on CodePen.

SVG（SVG関連のプロパティ）

Velocity.jsではSVG要素のアニメーションを制御することも可能です。

SVG要素に適用できるプロパティは、公式ページの「Feature: SVG」にまとめられています。

▼SVG要素に使用できるプロパティは公式サイトをご確認ください。

▼Velocity.jsでSVG関連のプロパティを扱うサンプル

See the Pen Velocity.js & SVG sample by TAM-hiroaki (@TAM-hiroaki) on CodePen.

Colors（色関連のプロパティ）

jQueryの animate() では、文字色や背景色などの色に関するプロパティをアニメーションさせるには、 jQuery Colorプラグインが必要ですが、Velocity.js では、プロパティにcolorやbackGroundColorなどが使用できます。

▼Velocity.jsで色関連のプロパティを扱うサンプル

See the Pen Velocity.js & Colors by TAM-hiroaki (@TAM-hiroaki) on CodePen.

まとめ

Velocity.jsを使用すれば、jQueryのanimate()に慣れている方は、同じような感覚でCSSのtransformやSVGを扱うことが可能です。
機能ごとに新しいプラグインを追加したり、CSSだけで複雑なアニメーションを指定していくのは大変！という方も代用できるか検討してみても良いかもしれません。