8 Pretty Cool Shake Animations In CSS – CSShake.css

Preview:

Description:

The CSShake.css comes with 8 interesting classes that you can use to shake your DOM elements with CSS.

It provides a great way to add some cool visual effects to transform your digital projects and designs.

How to use it:

1. Include a shake animation of your choice.

<!-- All In One -->
<link href="csshake.min.css" rel="stylesheet" type="text/css" />
<!-- Crazy -->
<link href="csshake-crazy.min.css" rel="stylesheet" type="text/css" />
<!-- Default -->
<link href="csshake-default.min.css" rel="stylesheet" type="text/css" />
<!-- Hard -->
<link href="csshake-hard.min.css" rel="stylesheet" type="text/css" />
<!-- Horizontal -->
<link href="csshake-horizontal.min.css" rel="stylesheet" type="text/css" />
<!-- Little -->
<link href="csshake-little.min.css" rel="stylesheet" type="text/css" />
<!-- Rotate -->
<link href="csshake-rotate.min.css" rel="stylesheet" type="text/css" />
<!-- Slow -->
<link href="csshake-slow.min.css" rel="stylesheet" type="text/css" />
<!-- Vertical -->
<link href="csshake-vertical.min.css" rel="stylesheet" type="text/css" />

2. Apply the shake animations to your elements.

<a class="shake">
  Default</a>
<br>
<a class="shake-crazy">
  Crazy
</a>
<a class="shake-slow">
  Slow
</a>
<a class="shake-hard">
  Hard
</a>
<a class="shake-little">
  Little
</a>
<a class="shake-horizontal">
  Horizontal
</a>
<a class="shake-vertical">
  Vertical
</a>
<a class="shake-rotate">
  Rotate
</a>

3. Trigger the shake animations on page load instead of hovering over the elements.

<div class="shake shake-constant"></div>
<!-- Pause On Hover -->
<div class="shake shake-constant shake-constant--hover"></div>
<!-- Freeze the current position on mouse leave -->
<div class="shake shake-constant shake-freeze"></div>