Home > Web Front-end > HTML Tutorial > CSS与SVG动画库:Animate Plus_html/css_WEB-ITnose

CSS与SVG动画库:Animate Plus_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:11:50
Original
1566 people have browsed it

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>
Copy after login

Start animating things:

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

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);
Copy after login

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.open-open.com/lib/view/home/1434012030223

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template