Heim > Artikel > Web-Frontend > Leichte und leistungsstarke CSS3-Animationsbibliothek
简要教程 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 |
Das obige ist der detaillierte Inhalt vonLeichte und leistungsstarke CSS3-Animationsbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!