CSS與SVG動畫庫：Animate Plus

Animate Plus是一個高性能的 JavaScript 庫，能夠幫助你構建動畫效果的CSS 屬性和 SVG 屬性Animate Plus 是非常適合快速 UI 交互的，同時也適合臺式和移動設備上更長的動畫序列。示例：

• CSS spring animations on DOM elements
• Simple SVG morphing animation
• Performance/stress test (250 SVG shapes animated independently)

Getting Started

npm install animateplusor download and insertanimate.min.js(2.7KB gzipped) :

<script src=animate.min.js></script>

Start animating things:

animate({
  el: "div",
  translateX: 100,
  opacity: .5,
  duration: 500 });

API

Arguments

animateaccepts either anObjector aMapcontaining at least an element and a property to animate:

animate({
  el: "div",
  opacity: 0 }); // Or: var params = new Map();
params.set("el", "div");
params.set("opacity", 0);
animate(params);

el

The elements to animate.elcan either take a:

• CSS selector:"div"
• jQuery-like object:$("div")
• DOM element:document.querySelector("div")
• Array of DOM elements:[document.querySelector("div")]
• NodeList or HTMLCollection:document.getElementsByTagName("div")

項目主頁：http://www.baiduhome.net/lib/view/home/1434012030223