輕量級高效能的CSS3動畫庫

簡要教程 　　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-top-bottom (looped) 　　slide-left-right (looped) 　　tremble (looped) 　　fade-in 　　fade-out 　　pulsate (looped) 　　rotate 　　Repaintless.css動畫庫的github地址為：https://github.com/szynszyliszys/repaintless