基于Facebook Rebound.js制作的CSS3动画库

当前位置:主页 > CSS3库 > CSS3动画 > 基于Facebook Rebound.js制作的CSS3动画库
基于Facebook Rebound.js制作的CSS3动画库
分享:

    插件介绍

    reboundgen是一款基于Facebook Rebound.js制作的CSS3动画库。该CSS3动画库使用Facebook的Rebound.js插件来输出动画的SCSS样式文件,使用时仅需添加一个class类即可,非常方便。

    浏览器兼容性

    浏览器兼容性
    时间:2018-04-02
    阅读:
简要教程

reboundgen是一款基于Facebook Rebound.js制作的CSS3动画库。该CSS3动画库使用Facebook的Rebound.js插件来输出动画的SCSS样式文件,使用时仅需添加一个class类即可,非常方便。

使用方法

在页面中引入reboundgen.min.css文件。

<link href="css/reboundgen.min.css" rel="stylesheet">
                
HTML结构

然后简单的为你需要制作动画效果的元素添加相应的class类即可,例如:

<div class="bounceInRight"></div>
                

可用的class类有:

  • bounceInRight
  • bounceInLeft
  • bounceInDown
  • bounceInDrop
  • glideInRight
  • glideInLeft
  • glideInUp
  • glideInDown
  • bounceInScale
  • bounceInScale2
  • springScaleOut
  • hoverJiggle
  • hoverJiggle2
  • twirlIn
  • rubberband
  • jellyfall
  • jellyfall2
  • slideInRight
  • slideInLeft
  • flipInLeft
  • flipInRight
  • flipInBottom
  • flipInTop
  • kitchenSink
  • flyInBottom
  • flyInLeft
  • flyInRight

该基于Facebook Rebound.js制作的CSS3动画库的github地址为:https://github.com/dwarcher/reboundgen

网友评论