< head >
< link rel ="stylesheet " href ="vov.min.css ">
</ head > < link href ="https://cdn.jsdelivr.net/gh/vaibhav111tandon/vov.css@latest/vov.css " rel ="stylesheet " type ="text/css "> < link href ="https://cdn.jsdelivr.net/gh/vaibhav111tandon/vov.css@latest/vov.min.css " rel ="stylesheet " type ="text/css ">
Class Name
Fading Animations
fade-in-bottom-leftfade-in-bottom-rightfade-in-downfade-in-left
fade-in-rightfade-in-top-leftfade-in-top-rightfade-in-up
fade-infade-out-bottom-leftfade-out-bottom-rightfade-out-down
fade-out-leftfade-out-rightfade-out-top-leftfade-out-top-right
fade-out-upfade-out
Class Name
Rolling Animations
roll-in-leftroll-in-rightroll-out-leftroll-out-right
Class Name
Shaking Animations
shake-verticalshake-horizontalshake-diagonallyshake-i-diagonally
Class Name
Blur Animations
blur-inblur-out
Class Name
Sliding Animations
slide-in-downslide-in-leftslide-in-rightslide-in-up
slide-out-downslide-out-leftslide-out-rightslide-out-up
Class Name
Zooming Animations
zoom-in-downzoom-in-leftzoom-in-rightzoom-in-up
zoom-inzoom-out-downzoom-out-leftzoom-out-right
zoom-out-upzoom-out
Class Name
Throbing Animations
throbi-throb
Class Name
Swivel Animations
swivel-horizontalswivel-horizontal-doubleswivel-verticalswivel-vertical-double
Class Name
Shrinking Animations
shrink-leftshrink-rightshrink-topshrink-bottom
Class Name
Wheel Animations
wheel-in-leftwheel-in-rightwheel-out-leftwheel-out-right
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
< h1 class ="vov flash "> sample animations</ h1 > To vary the animation-duration
Class Name
Time
fastest300ms
faster500ms
fast800ms
slow2s
slower3s
slowest4s
< h1 class ="vov flash fastest "> sample animations</ h1 >
< h1 class ="vov flash faster "> sample animations</ h1 >
< h1 class ="vov flash fast "> sample animations</ h1 >
< h1 class ="vov flash slow "> sample animations</ h1 >
< h1 class ="vov flash slower "> sample animations</ h1 >
< h1 class ="vov flash slowest "> sample animations</ h1 > Provided are some of the animation timing classes
f-10, f-20, f-30, f-40, f-50 where digit are the steps.
To make the iteration count infinite.
< h1 class ="vov flash infinite "> sample animations</ h1 > You can also use classes c-2, c-3, c-4, c-4 where the digit denotes the iteration counts.
To animation-delay use class t-1, t-2, t-3, t-4, t-5 where the digit denotes the seconds delay.
< h1 class ="vov flash t-5 "> sample animations</ h1 > Keyframes
Or by contributing
Or by giving it a ⭐
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent