輕量級高效能的CSS3動畫庫

　　pulsate (looped)

　　簡要教學

　　Repaintless.css是一款輕量級高效能的CSS3動畫庫。 Repaintless.css透過特殊的方法來製作元素動畫，不會引起頁面的重繪，使它比其它CSS動畫庫具有更高的性能。

#　　安裝

##　　安裝

　　你可以透過bower或npm來安裝Repaintless.css。

$ bower install repaintless
$ npm install repaintless

　　使用方法

　　使用該CSS3動畫庫需要在頁面中引入repaintless .css文件。

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

　　HTML結構

　　要讓一個元素可以動畫，你需要做的就是為該元素添加element-animated class，這個是必須加入的

class

類，然後使用第二個class類來指明你需要的動畫類型。

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

　　預設情況下動畫的時間是1秒鐘。你可以透過class short來指定動畫時間為0.5秒，long為2秒。如果你需要做無窮動畫，可以加入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>

　　動畫類型

　　Repaintless.css所有可用的動畫類型如下。某些動畫是會一直循環的動畫。

　　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-from-left-top

　　slide-top-bottom (looped)

　　slide-left-right (looped)

#　　tremble (looped)

#　　tremble (looped)

　　fade-in

#　　fade-out

#########　　pulsate (looped)#### ########　　rotate############　　Repaintless.css動畫庫的github位址為：https://github.com/szynszyliszys/repaintless############################################################################################################################################################################################################################ ##########

以上是輕量級高效能的CSS3動畫庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！