Home  >  Article  >  Web Front-end  >  Lightweight and high-performance CSS3 animation library

Lightweight and high-performance CSS3 animation library

巴扎黑
巴扎黑Original
2017-06-03 10:07:432907browse

 Brief tutorial

Repaintless.css is a lightweight and high-performance CSS3Animation library. Repaintless.css uses a special method to animate elements without causing page redrawing, making it more performant than other CSS animation libraries.


Lightweight and high-performance CSS3 animation library


Install

You can install Repaintless.css through bower or npm.

$ bower install repaintless
$ npm install repaintless

 How to use

To use this CSS3 animation library, you need to introduce repaintless into the page .css files.

<link href="path-to-css-directory/repaintless.css" rel="stylesheet"></link>

 HTML structure

To make an element animate, what you need to do Just add element-animated to the element class, this is the class class that must be added, and then use the second class class to specify the animation type you need.


<p class="element-animated tremble"> I tremble! </p>

 The animation time is 1 second by default. You can specify the animation time as 0.5 seconds through class short and 2 seconds as long. If you need to do 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 will do that forever to drive you crazy! 
</p>

 Animation Type

All animation types available in Repaintless.css are as follows. Some animations are animations that loop forever.

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

pulseate (looped)

rotate

The github address of the Repaintless.css animation library is: https://github.com/szynszyliszys/repaintless

The above is the detailed content of Lightweight and high-performance CSS3 animation library. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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