Brief tutorials The REPAINTLESS.CSS is a lightweight, high-performance CSS3 animation Library. REPAINTLESS.CSS uses special methods to animate elements without causing the page to redraw, making it more performance than other CSS animation libraries.
Installation You can install repaintless.css via bower or NPM. $ bower Install repaintless$ NPM Install repaintless
How to use Using the CSS3 animation library requires the introduction of REPAINTLESS.CSS files in the page. <link href= "Path-to-css-directory/repaintless.css" rel= "stylesheet" ></link>
HTML structure To animate an element, all you need to do is add the element-animated class to the element, which is the class class that must be added, and then use the second class class to indicate the type of animation you need.
<p class= "element-animated tremble" > I tremble! </p>
By default, the animation time is 1 seconds. You can specify an animation time of 0.5 seconds and a long of 2 seconds through class short. If you need to do an infinite animation, you can add infinite class. <p class= "element-animated slide-from-top short" > I am quick! </p> <p class= "element-animated Slide-from-top Long "> I am slooow ... </p> <p class=" element-animated slide-from-top infinite "> I'll do, forever to drive you crazy! </p>
Type of animation Repaintless.css all the available animation types are as follows. Some animations are animations that will always loop. Slide-from-top Slide-from-bottom Slide-from-left Slide-from-right Slide-from-right-bottom Slide-from-right-top Slide-from-left-bottom Slide-from-left-top Slide-top-bottom (looped) Slide-left-right (looped) Tremble (looped) Fade-in Fade-out Pulsate (looped) Rotate The GitHub address for the Repaintless.css animation library is: https://github.com/szynszyliszys/repaintless |