|
簡要教學
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
| 