Vivify web presentation
Vivify is free CSS animation library.
Usage
Simply include vivify css file into your document's <head>
<link href="vivify.min.css" rel="stylesheet" type="text/css"/>
Add class vivify
to the element you want to animate. If you want your animation to be infinite, you can also add infinite
class.
List of class names you can add
ball
blink
driveInBottom
driveInLeft
driveInRight
driveInTop
driveOutBottom
driveOutLeft
driveOutRight
driveOutTop
fadeIn
fadeInBottom
fadeInLeft
fadeInRight
fadeInTop
fadeOut
fadeOutBottom
fadeOutLeft
fadeOutRight
fadeOutTop
flip
flipInX
flipInY
flipOutX
flipOutY
fold
hitLeft
hitRight
jumpInLeft
jumpInRight
jumpOutLeft
jumpOutRight
popIn
popInBottom
popInLeft
popInRight
popInTop
popOut
popOutBottom
popOutLeft
popOutRight
popOutTop
pullDown
pullLeft
pullRight
pullUp
pulsate
rollInBottom
rollInLeft
rollInRight
rollInTop
rollOutBottom
rollOutLeft
rollOutRight
rollOutTop
shake
spin
spinIn
spinOut
swoopInBottom
swoopInLeft
swoopInRight
swoopInTop
swoopOutBottom
swoopOutLeft
swoopOutRight
swoopOutTop
unfold
Preview all animations here
delay and duration classes
If you want to quickly change delay or duration you can just add delay-
or duration-
and number in ms.
Available times: 100,150 to 900,950 1000,1250,1500,1750 to 10000,10250,10500,10750
example: delay-2500
for 2.5 second delay. or duration-550
for 550 ms duration.