课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > 一款轻量级高性能的CSS3动画库
  • 一款轻量级高性能的CSS3动画库

    发布:合肥web培训      来源:达内新闻      时间:2016-05-27

  • 合肥web培训专家介绍一款非常实用的CSS3动画库,轻量级,而且性能很好。

    Repaintless.css是一款轻量级高性能的CSS3动画库。Repaintless.css通过特殊的方法来制作元素动画,不会引起页面的重绘,使它比其它CSS动画库具有更高的性能。

    安装

    你可以通过bower或npm来安装Repaintless.css。

    view source print?
     $ bower install repaintless  
     $ npm install repaintless
    使用方法

    使用该CSS3动画库需要在页面中引入repaintless.css文件。

    view source print?
    <link href="path-to-css-directory/repaintless.css" rel="stylesheet"></link>
    HTML结构

    要使一个元素可以动画,你需要做的就是为该元素添加element-animated class,这个是必须添加的class类,然后使用第二个class类来指明你需要的动画类型。

    view source print?
    <div class="element-animated tremble"> I tremble! </div>

    默认情况下动画的时间是1秒钟。你可以通过class short来指定动画时间为0.5秒,long为2秒。如果你需要做无穷动画,可以添加infinite class。

    view source print?
    <div class="element-animated slide-from-top short">  
     I am quick!    
    </div>   
    <div class="element-animated slide-from-top long">    
    I am slooow...    
    </div>   
    <div class="element-animated slide-from-top infinite">    
    I will do that forever to drive you crazy!    
    </div>  
    动画类型

        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

    推荐文章

上一篇:JavaScript 数字的常用属性方法

下一篇:前端学习书籍推荐

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:4-15

WEB零基础周末班

WEB零基础周末班

开班日期:

WEB前端业余班

WEB前端业余班

开班日期:4-15

WEB前端就业班

WEB前端就业班

开班日期:4-15

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56