JavaScriptプログラムに関する各種メモ書き

jQueryを使ってCSS3アニメーションを操作する。【jquery.transit】

■ jquery.transit · GitHub

https://github.com/rstacruz/jquery.transit#readme

jQueryを使いますが、アニメーション自体はCSS3アニメーションなのでスマホでも軽いです。 例:(フェードインの例)

<div id="test" style="border:1px solid red;">テストです</div>
$('#test').transition({ opacity: 0.0, scale: 0.5 }, 0);
$('#test').transition({
  opacity : 1.0,
  scale   : 1.0 ,
  duration: 5000,
  complete: function() {
    alert("CSS3 animation complete!");
  }
});

関連エントリー

No.988
12/18 17:23

edit

jQuery
css
アニメーション