Cool CSS3 jitter style: CSS Shake

CSS Shake is an animated style implemented using CSS3, written using sass, which allows us to implement a variety of different styles of jitter effects (such as the following GIF image):

Cool CSS3 jitter style: CSS Shake

This is a very small animation, but it is very good to use, such as ads, images, buttons, so that can be used to attract the user's eye so as to push to click on it.

This csshake has 9 jitter styles, three states, such as a mouse pull, infinite jitter, mouse hover pull.

How to use CSS Shake:

First, the CSS Shake style sheet file is introduced.
CSS3 button:? http://www.huiyi8.com/css3/anniu/
Add the Shake class style to your DOM element. Jitter style, altogether 9 kinds, can see the effect of the demo to add the CSS you want.

In addition I can pass. Freeze,. Shake-constant &. Hover-stop to control the state, you can try the effect!

Note: Sass is a front-end CSS framework that extends the CSS3, adding rules, variables, mixes, selectors, inheritance, and more. Sass is a CSS development tool to generate well-formatted CSS code, and also provides a lot of convenient wording, greatly saving the designer time, make CSS development, become simple and maintainable. Sass is written in the Ruby language, but the syntax of the two is not related. If you don't know Ruby, you'll still use it. Just have to install Ruby before installing sass.

Demo Please see: http://elrumordelaluz.github.io/csshake/

1. [Image] Css-shake-demo.gif

2. [Code] first introduced the CSS Shake style sheet file.
<link type= "Text/css" href= "Csshake.css" >
3. [Code] jitter style
<div class= "Shake" ></div>
<div class= "Shake Shake-hard" ></div>
<div class= "Shake Shake-slow" ></div>
<div class= "Shake Shake-little" ></div>
<div class= "Shake Shake-horizontal" ></div>
<div class= "Shake Shake.vertical" ></div>
<div class= "Shake Shake-rotate" ></div>
<div class= "Shake Shake-opacity" ></div>
<div class= "Shake Shake-crazy" ></div>

Cool CSS3 jitter style: CSS Shake