visionmedia.github.io  3 users

Move.js - CSS3 animation framework for JavaScript

https://visionmedia.github.io/move.js/

簡単な記法で、アニメーションをすることができます。

中では、transition-delayとかを使っているようです。

インストール

bower i move.js

• i と書くと、installを略すことができます。

普通にやると怒られる！

中でonload時にdocument.bodyを呼び出しているので、

普通にscriptタグで読み込んでもエラーが出てしまいます。

次のように読み込みましょう！

アニメーションしよう！

まず構文。

move("クエリ")/*..... アニメーション処理 */.end();

move()からend()の間に処理を書くわけです。
処理は、公式サイトにたくさん書いてあります。
ここでは一部を紹介します。

cssプロパティを指定する

.set("CSSプロパティ名", 値)

例:

move("div.box")
  .set("opacity", 0)
  .end();

アニメーションの時間を指定する

.duration("秒数")

例:

move("div.box")
  .set("opacity", 0)
  .duration("1s");
  .end();

移動する

.translate(x, y)

例:

move("div.box")
  .translate(100, 80)
  .duration("0.5s")
  .end();

アニメーションが終わった後に実行する

.then()/* 処理 */.pop()

例:

move("div.box")
  .translate(100, 80)
  .then()
  .set("opacity", 0)
  .pop()
  .end();

例では、移動をしてから、opacityを0に指定します。

便利なので、使ってみてください！