DownloadBounce.js is a tool and JS library for generating beautiful CSS3 powered keyframe animations. The tool on bouncejs.com allows you to generate static keyframes that can be used without any extra JavaScript, but if you'd like your application to generate these on the fly, you can use the Bounce.js library. The Bounce object is what you'll use to first build your animation from the different components scale, rotate, translate and skew. This can then either be defined as a named animation for later use, or directly applied to elements on the page. As mentioned above, you'll use the scale, rotate, translate and skew methods to build your animation, just like with the Bounce.js tool. All of these methods accept a number of common options (explained further down) and from and to parameters that define the start and end points of the animation. Note that all of these methods are chainable.
Features
- The from and to parameters define the scale of the element on X (width) and Y (height) as a ratio
- To create an animation, instantiate a new Bounce object
- Change the duration of the animation in ms
- The stiffness of the bounces in the animation, should be a value between 1 and 5
- Once you've built your animation, you can either choose to define it as a named keyframe animation, or directly apply it to any element in the DOM
- Loop the animation as much as you want
Project Samples
