60+ CSS Animations Library – Annimay.css

Preview:

Description:

Annimay.css is a CSS animation library that comes with 52 fancy hover animations and 12 infinite animations.

Hover Animations:

• Scale Up
• Scale Up Stay
• Scale Down
• Scale Down Stay
• Skew Forward Up
• Skew Forward Down
• Skew Backward Up
• Skew Backward Down
• Backward
• Forward
• Opacity
• Small Opacity
• Lift Clockwise
• Lift Anticlockwise
• Rotate Clockwise
• Rotate Anticlockwise
• Float
• Float Stay
• Wiggle
• Jump
• Jump Stay
• Raise
• Moving Rainbow
• Background Fill
• Background Slide
• Background Fade
• Rectangle In
• Rectangle Out
• Shutter In
• Shutter In Vertical
• Shutter Out
• Shutter Out Vertical
• Neon Backlight
• Glow
• Shadow
• Grow Shadow
• Shadow Outset
• Shadow Inset
• Shine
• Border Fade
• Border Draw
• Rounded Edges
• Underline Left
• Underline Right
• Underline Center
• Underline Show
• Corner Grow
• Trim and Outline
• Outlined Border

Infinite Animations:

• Rotate
• Jump
• Wiggle
• Pulse
• Bounce
• Flash
• Hover
• Moving Gradient
• Outlined Border

How to use it:

1. Import the annimay.css library.

<link rel="stylesheet" href="./css/annimay.css" />

2. Add animation styles to the target element and done.

<!-- Hover Animations -->
<button class="ann-scale-up">Scale Up</button>
<button class="ann-scale-up-stay">Scale Up Stay</button>
<button class="ann-scale-down">Scale Down</button>
<button class="ann-scale-down-stay">Scale Down Stay</button>
<button class="ann-skew-forward-up">Skew Forward Up</button>
<button class="ann-skew-forward-down">Skew Forward Down</button>
<button class="ann-skew-backward-up">Skew Backward Up</button>
<button class="ann-skew-backward-down">Skew Backward Down</button>
<button class="ann-backward">Backward</button>
<button class="ann-forward">Forward</button>
<button class="ann-opacity">Opacity</button>
<button class="ann-small-opacity">Small Opacity</button>
<button class="ann-lift-clockwise">Lift Clockwise</button>
<button class="ann-lift-anticlockwise">Lift Anticlockwise</button>
<button class="ann-rotate-clockwise">Rotate Clockwise</button>
<button class="ann-rotate-anticlockwise">Rotate Anticlockwise</button>
<button class="ann-float">Float</button>
<button class="ann-float-stay">Float Stay</button>
<button class="ann-wiggle">Wiggle</button>
<button class="ann-jump">Jump</button>
<button class="ann-jump-stay">Jump Stay</button>
<button class="ann-raise">Raise</button>
<button class="ann-moving-rainbow">Moving Rainbow</button>
<button class="ann-bg-fill">Background Fill</button>
<button class="ann-bg-slide">Background Slide</button>
<button class="ann-bg-fade">Background Fade</button>
<button class="ann-rectangle-in">Rectangle In</button>
<button class="ann-rectangle-out">Rectangle Out</button>
<button class="ann-shutter-in-horizontal">Shutter In</button>
<button class="ann-shutter-in-vertical">Shutter In Vertical</button>
<button class="ann-shutter-out-horizontal">Shutter Out</button>
<button class="ann-shutter-out-vertical">Shutter Out Vertical</button>
<button class="ann-neon-backlight">Neon Backlight</button>
<button class="ann-glow">Glow</button>
<button class="ann-shadow">Shadow</button>
<button class="ann-grow-shadow">Grow Shadow</button>
<button class="ann-box-shadow-outset">Shadow Outset</button>
<button class="ann-box-shadow-inset">Shadow Inset</button>
<button class="ann-shine">Shine</button>
<button class="ann-border-fade">Border Fade</button>
<button class="ann-border-draw">Border Draw</button>
<button class="ann-round-edges">Rounded Edges</button>
<button class="ann-underline-left">Underline Left</button>
<button class="ann-underline-right">Underline Right</button>
<button class="ann-underline-center">Underline Center</button>
<button class="ann-underline-show">Underline Show</button>
<button class="ann-corner-grow">Corner Grow</button>
<button class="ann-trim-outline">Trim and Outline</button>
<button class="ann-outlined-border">Outlined Border</button>

<!-- Infinite Animations -->
<div class="ann-rotate-clockwise-infinite styled-div">Rotate</div>
<div class="ann-rotate-anticlockwise-infinite styled-div">Rotate</div>
<div class="ann-jump-infinite styled-div">Jump</div>
<div class="ann-wiggle-infinite styled-div">Wiggle</div>
<div class="ann-pulse-infinite styled-div">Pulse</div>
<div class="ann-bounce styled-div">Bounce</div>
<div class="ann-flash styled-div">Flash</div>
<div class="ann-hover styled-div">Hover</div>
<div class="ann-rotate-clockwise-3d styled-div">Rotate 3D</div>
<div class="ann-rotate-anticlockwise-3d styled-div">Rotate 3D</div>
<div class="ann-moving-gradient styled-simple">Moving Gradient</div>
<div class="ann-moving-gradient-opposite styled-simple">
  Outlined Border
</div>