Example 1:
Code:
<p>
<a class="vtra vgrow vh" href="#">grow</a>
</p>
<p>
<a class="vtra vgrowRotate vh" href="#">growRotate</a>
</p>
<p>
<a class="vtra vrotate vh" href="#">rotate</a>
</p>
<p>
<a class="vtra vshrink vh" href="#">shrink</a>
</p>
<p>
<a class="vtra vbounceUt vh" href="#">bounceUp</a>
</p>
<p>
<a class="vtra vbounceDt vh" href="#">bounceDown</a>
</p>
<p>
<a class="vtra vmoveUt vh" href="#">moveUp</a>
</p>
<p>
<a class="vtra vmoveDt vh" href="#">moveDown</a>
</p>
<p>
<a class="vtra vmoveRt vh" href="#">moveRight</a>
</p>
<p>
<a class="vtra vmoveLt vh" href="#">moveLeft</a>
</p>Example 2:
Code:
<p class="vh-run">
<a class="vtra vflipItXt vtra-d3 vtra-d1- vrun" href="#">Flip In X</a>
</p>
<p class="vh-run">
<a class="vtra vflipItYt vtra-d3 vrun" href="#">Flip In Y</a>
</p>
<p class="vh-run">
<a class="vtra vflipOtXt vtra-d3 vtra-d1- vrun" href="#">Flip Out X</a>
</p>
<p class="vh-run">
<a class="vtra vflipOtYt vtra-d3 vrun" href="#">Flip Out Y</a>
</p>
Example 1:
Code:
<p>
<a class="vani vbounce vh" href="#">Hover In</a>
</p>
<p>
<a class="vani vbounce vh-" href="#">Hover Out</a>
</p>
<p>
<a class="vani vbounce vani-ici vh-stop" href="#">Hover Stop</a>
</p>
<p class="vh-run">
<a class="vani vbounce vrun" href="#">Hover Run</a>
</p>
<p class="vh-run">
<a class="vani vbounce vani-ici vrun" href="#">Hover Infinite</a>
</p>Example 2:
Code:
<div class="vh-run-li vpad-50">
<p>
<a class="vani vbounce vrun vani-ici" href="#">Hover Run List Infinite</a>
</p>
<p>
<a class="vani vbounce vrun" href="#">Hover Run List</a>
</p>
</div>Example 3 (Duration):
Trigger Animation
Code:
<p id="triggerA1" class="active swatch3-bg vopa-0 vani vfadeIa vani-d2">Trigger Animation</p>
<a class="button swatch2-dark-bg swatch5-color" href="#" data-vfn="e:click,f:toggleAnimation,a:vfadeIa,s:#triggerA1">toggleAnimation</a>Example 4 (Delay):
Trigger Animation
Code:
<p id="triggerB1" class="active swatch3-bg vani vbounceOaDa vani-d3-">Trigger Animation</p>
<a class="button swatch2-dark-bg swatch5-color" href="#" data-vfn="e:click,f:toggleClass,a:vbounceOaDa,s:#triggerB1">toggleClass</a>
Example 1:
I'm Invisible
Code:
<p class="vopa-0">I'm Invisible</p>Example 2:
I'm Invisible
Code:
<p class="vopa vopa-0 vtra-d1" style="opacity:0.5">I'm Invisible</p>
Example 1:
Border Radius Rounded
Border Radius Rounded Right 0
Border Radius Rounded Bottom 0
Code:
<p class="vbor-rr">Border Radius Rounded</p>
<p class="vbor-rr vbor-rr0">Border Radius Rounded Right 0</p>
<p class="vbor-rr vbor-rb0">Border Radius Rounded Bottom 0</p>Example 2:
Border Radius Circular
Border Radius Circular Left 0
Border Radius Circular Top 0
Code:
<p class="vbor-rc">Border Radius Circular</p>
<p class="vbor-rc vbor-rl0">Border Radius Circular Left 0</p>
<p class="vbor-rc vbor-rt0">Border Radius Circular Top 0</p>
Example 1:
Border
Border Top
Border Right
Border Left
Border Bottom
Code:
<p class="vbor">Border</p>
<p class="vbor-t">Border Top</p>
<p class="vbor-r">Border Right</p>
<p class="vbor-l">Border Left</p>
<p class="vbor-b">Border Bottom</p>
