Vivify is a free CSS animation library, adding movement and effects such as fading, jumping in, rolling, and spin. Options for changing duration and delay are also editable!
Simply include the vivify css file into your document's <head>
<link href="vivify.min.css" rel="stylesheet" type="text/css"/>Add the class vivify to the element you want to animate. If you want your animation to be infinite, you can also add the infinite class.
If you want to quickly change delay or duration you can just add delay- or duration- and number in ms.
Available times
100 to 1000: 50 ms increments (150, 200, 250...)
1000 to 10750: 250 ms increments (1250, 1500, 1750...)
example: delay-2500 for 2.5 second delay. or duration-550 for 550 ms duration.
- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent