Author: | elrumordelaluz |
---|---|
Views Total: | 1,383 views |
Official Page: | Go to website |
Last Update: | November 21, 2022 |
License: | MIT |
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>