10 CSS3-worth collection of dynamic libraries

Now in the design of websites and apps increasing emphasis on user experience, and good mobility can make your application more interactive, attracting more users. I usually add some to the website Simple and consistentAnd the technology I use is Sass+bourbonTo generate CSS3-based animation effects. But if you're not familiar with defining CSS3 in the definition, or want to introduce a more straightforward approach to your application, you can refer to and use these 10 excellent dynamic libraries (tools).

1. Animate.css

Animate.css is one of my favorite CSS3, ideal for those who are unfamiliar with CSS3 animation, but want to give their website or H5-based app a more dynamic friend. Because, you just need to add the animate.css to the elements that need to be implemented as a predefined action name. For example, the common: Bounce,flash,fadein,fadeout and so on, add up to have 75 different kinds of dynamic effect, completely can meet your basic needs.

Of course there are some precautions to use for this library, such as you might want to remove the dynamic style immediately after you have added a dynamic effect to the element. In addition, you need to make some adjustments for the duration of the action, the amplitude of the vibration, and so on. Because, I feel it is too fast and strong in the default settings. ANIMATE.CSS has provided detailed documentation to show you how to make these adjustments.

2. Bounce.js

Bounce.js is a small tool that generates CSS3, which is written in JavaScript and provides a web interface, you can add a component and then you can choose to include these types of Scale,translate,rotate,skew, and then set their parameters separately when Once you have the desired effect, you can export the action in CSS, so you can apply it to your app.

3. CSS3 Animation

CSS3 animation is a very simple and easy to use dynamic tool, you can in its simple graphical interface, by dragging some progress bar to control your action, the generated CSS code will automatically appear in the following text box, you can copy and paste into your app directly.

4. CSS Animate

If you feel that the tools above do not make the move you want, then you can look at the CSS animate tool. It allows you to set more dynamic parameters, such as the coordinates, size, and transparency of both the start and end states, so you can make more complex moves.

5.Magic Animations

Magic animations is very similar to ANIMATE.CSS and is a pre-defined CSS library with a series of dynamic effects. But the biggest difference from animate.css may be that it defines those that are more dynamic and cooler, and if your site is trendy, consider using this CSS dynamic library.

6.AniJS

Anijs is a dynamic library controlled by JavaScript. It allows you to define the dynamic through its chained syntax. For example, this element will flip along the y-axis when the user clicks.

<p data-anijs= "If:click, Do:flipiny, to:. Container-box" ></p>

7.Single Element CSS Spinners

We often need some action to express that the system is in the process of loading or processing data. Single Element CSS spinners this project on GitHub provides a very nice set of CSS3 that can be used facilitates.

8.snabbt.js

Sanbbt.js is a dynamic library that I like very much, it is very small only 5 k, so it can be used in mobile applications. It also supports chained syntax, and you can easily write complex combinations of dynamic effects.

SNABBT (element, {  position: [0, 0],  easing:function (value) {    return value + 0.3 * Math.sin (2*MATH.PI * V alue);}  ). SNABBT ({  position: [0, 0, 0],  easing: ' EaseOut '});

9.Odometer

Odometer is used to animate numbers, for example, by which you can nicely present the number of sites, Countdown, and other digital-related animation effects.

10.hover.css

HOVER.CSS provides a number of Hover effects, including 2D transformations, icon transformations, background transformations, and more. And can be applied to almost all elements, including links, buttons, logo,svg and even pictures.