Shulou(Shulou.com)06/02 Report--

Visual CSS3 animation code to generate js library plug-in bounce js how to use, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

Bounce.js is a very powerful plug-in for visual CSS3 animation code generation js library. The js library plug-in provides an online APP, through the APP can be visual conditions to edit a variety of CSS3 animation effects, such as movement, rotation, tilt, easing and other effects, editing can be completed directly access to the CSS3 frame animation code, copy code with your page can be obtained in your page with the same effect as the animation. In addition, you can also use Bounce.js alone, through js code to complete a variety of CSS3 animation effects. Bounce.js can be combined with jQuery perfectly.

Bounce.js installation

You can install Bounce.js through Bower or NPM.

$bowerinstallbounce.js

# OR

$npminstallbounce.js

How to use Bounce.js

To use bounce.js to create a CSS3 animation, first create a Bounce object.

Varbounce=newBounce ()

Before animating CSS3, you must first create a Bounce object, and then use it to add various animation components: scale, rotate, translate, and skew. You can define a name for the CSS3 animation, or apply an element on the page directly to the object.

Add CSS3 animation component

Scale

As mentioned above, you need to use scale, rotate, translate, or skew methods to create animations. These methods all accept a certain number of parameters, such as the from and to parameters that define the start and end positions of the animation elements. All of these methods can be chained.

Varbounce=newBounce ()

Bounce.scale ({

From: {x:0.5,y:0.5}

To: {x:1,y:1}

})

The from and to parameters in the above code define the scale ratio of the element on the X axis (width) and Y axis (height). This example changes the size of the element from 50% to 100%.

Rotate

Varbounce=newBounce ()

Bounce.rotate ({

From:0

To:90

})

The from and to parameters in the above code define the degree of rotation of the element.

In short, Bounce.js gives you a brief introduction. I hope you will take a look at it more.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.