58+ Modern Animations In A Single CSS File – Annex.css

Preview:

Description:

Annex.css is a lightweight CSS animation library that provides 58+ CSS-powered animations to create distinct visual effects on your webpage. Inspired by Animate.css.

How to use it:

1. Download and import the stylesheet into the document.

npm i annexcss

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

2. Then, add an animation class of your choice to the element. Done.

<div class="@bounce">@bounce</div>
<div class="@flash">@flash</div>
<div class="@pulse">@pulse</div>
<div class="@rollIn">@rollIn</div>
<div class="@shake">@shake</div>
<div class="@headShake">@headShake</div>
<div class="@swing">@swing</div>
<div class="@rollOut">@rollOut</div>
<div class="@wobble">@wobble</div>
<div class="@tada">@tada</div>
<div class="@bounceIn">@bounceIn</div>
<div class="@bounceInDown">@bounceInDown</div>
<div class="@bounceInLeft">@bounceInLeft</div>
<div class="@bounceInRight">@bounceInRight</div>
<div class="@bounceInUp">@bounceInUp</div>
<div class="@bounceOut">@bounceOut</div>
<div class="@bounceOutDown">@bounceOutDown</div>
<div class="@bounceOutLeft">@bounceOutLeft</div>
<div class="@bounceOutRight">@bounceOutRight</div>
<div class="@bounceOutUp">@bounceOutUp</div>
<div class="@fadeIn">@fadeIn</div>
<div class="@fadeInDown">@fadeInDown</div>
<div class="@fadeInDownBig">@fadeInDownBig</div>
<div class="@fadeInLeft">@fadeInLeft</div>
<div class="@fadeInLeftBig">@fadeInLeftBig</div>
<div class="@fadeInRight">@fadeInRight</div>
<div class="@fadeInRightBig">@fadeInRightBig</div>
<div class="@fadeInUp">@fadeInUp</div>
<div class="@fadeInUpBig">@fadeInUpBig</div>
<div class="@fadeOut">@fadeOut</div>
<div class="@fadeOutDown">@fadeOutDown</div>
<div class="@fadeOutDownBig">@fadeOutDownBig</div>
<div class="@fadeOutLeft">@fadeOutLeft</div>
<div class="@fadeOutLeftBig">@fadeOutLeftBig</div>
<div class="@fadeOutRight">@fadeOutRight</div>
<div class="@fadeOutRightBig">@fadeOutRightBig</div>
<div class="@fadeOutUp">@fadeOutUp</div>
<div class="@fadeOutUpBig">@fadeOutUpBig</div>
<div class="@flipInX">@flipInX</div>
<div class="@flipInY">@flipInY</div>
<div class="@flipOutX">@flipOutX</div>
<div class="@flipOutY">@flipOutY</div>
<div class="@slideInUp">@slideInUp</div>
<div class="@slideOutUp">@slideOutUp</div>
<div class="@rotateIn">@rotateIn</div>
<div class="@rotateInDownLeft">@rotateInDownLeft</div>
<div class="@rotateInDownRight">@rotateInDownRight</div>
<div class="@rotateInUpLeft">@rotateInUpLeft</div>
<div class="@rotateInUpRight">@rotateInUpRight</div>
<div class="@rotateOut">@rotateOut</div>
<div class="@rotateOutDownLeft">@rotateOutDownLeft</div>
<div class="@rotateOutDownRight">@rotateOutDownRight</div>
<div class="@rotateOutUpLeft">@rotateOutUpLeft</div>
<div class="@rotateOutUpRight">@rotateOutUpRight</div>
<div class="@zoomOutUp">@zoomOutUp</div>
<div class="@zoomOut">@zoomOut</div>
<div class="@zoomIn">@zoomIn</div>
<div class="@zoomInDown">@zoomInDown</div>

3. The library also has CSS utilities that allow you to customize and control the animations.

• @infinite
• @reapeat-1
• @repeat-2
• @repeat-3
• @delay-1s
• @delay-2s
• @delay-3s
• @delay-4s
• @delay-5s
• @faster
• @fast
• @slow
• @slower