vov.css !npm bundle size !GitHub !GitHub
=======


#### You can install the file
``html



`

#### Instead of installing you can also use the cdn
`html

`

#### Or use the minified version by adding
`html

`


| Class Name | | Fading Animations | |
| ---------------------- | ----------------------- | ------------------------- | ---------------------- |
| fade-in-bottom-left | fade-in-bottom-right | fade-in-down | fade-in-left |
| fade-in-right | fade-in-top-left | fade-in-top-right | fade-in-up |
| fade-in | fade-out-bottom-left | fade-out-bottom-right | fade-out-down |
| fade-out-left | fade-out-right | fade-out-top-left | fade-out-top-right |
| fade-out-up | fade-out |

---------------------------------------------------------------------------------------------------------


| Class Name | | Rolling Animations | |
| ---------------------- | ----------------------- | ------------------------- | ---------------------- |
| roll-in-left | roll-in-right | roll-out-left | roll-out-right |

---------------------------------------------------------------------------------------------------------


| Class Name | Shaking Animations | | |
| ---------------------- | ----------------------- | ------------------------- | ---------------------- |
| shake-vertical | shake-horizontal | shake-diagonally | shake-i-diagonally |

---------------------------------------------------------------------------------------------------------


| Class Name | Blur Animations |
| ---------------------- | ----------------------- |
| blur-in | blur-out |

---------------------------------------------------------------------------------------------------------


| Class Name | | Sliding Animations | |
| ---------------------- | ----------------------- | ------------------------- | ---------------------- |
| slide-in-down | slide-in-left | slide-in-right | slide-in-up |
| slide-out-down | slide-out-left | slide-out-right | slide-out-up |

---------------------------------------------------------------------------------------------------------


| Class Name | | Zooming Animations | |
| ---------------------- | ----------------------- | ------------------------- | ---------------------- |
| zoom-in-down | zoom-in-left | zoom-in-right | zoom-in-up |
| zoom-in | zoom-out-down | zoom-out-left | zoom-out-right |
| zoom-out-up | zoom-out |

---------------------------------------------------------------------------------------------------------


| Class Name | Throbing Animations |
| ---------------------- | --------------------------- |
| throb | i-throb |

---------------------------------------------------------------------------------------------------------


| Class Name | | Swivel Animations | |
| ---------------------- | ------------------------- | ------------------------- | ----------------------- |
| swivel-horizontal | swivel-horizontal-double| swivel-vertical | swivel-vertical-double|

------------------------------------------------------------------------------------------------------------


| Class Name | | Shrinking Animations | |
| ---------------------- | ------------------------- | ---------------------------- | ----------------------- |
| shrink-left | shrink-right | shrink-top | shrink-bottom |

------------------------------------------------------------------------------------------------------------


| Class Name | | Wheel Animations | |
| ---------------------- | ------------------------- | ------------------------- | ----------------------- |
| wheel-in-left | wheel-in-right | wheel-out-left | wheel-out-right |

------------------------------------------------------------------------------------------------------------

| Other Animations |
| ---------------------- |
| flash |

---------------------------------------------------------------------------------------------------------



Usage



Either install the file
OR
Just add the cdn in the head of your html. Start using the library by applying the different classes

Add the class vov to the element you want to animate

`html

sample animations

`

$3

To vary the animation-duration

| Class Name | Time |
| ---------------------- | ----------------------- |
| fastest | 300ms |
| faster | 500ms |
| fast | 800ms |
| slow | 2s |
| slower | 3s |
| slowest | 4s |



`html

sample animations

sample animations

sample animations

sample animations

sample animations

sample animations

`

$3

Provided are some of the animation timing classes
f-10, f-20, f-30, f-40, f-50 where digit are the steps.

$3

To make the iteration count infinite.

`html

sample animations

`
You can also use classes c-2, c-3, c-4, c-4 where the digit denotes the iteration counts.

$3

To animation-delay use class t-1, t-2, t-3, t-4, t-5 where the digit denotes the seconds delay.

`html

sample animations

``

$3

Keyframes

$3

Or by contributing

Or by giving it a :star: