https://github.com/martz90/vivify

Vivify is free CSS animation library.
https://github.com/martz90/vivify

animation animation-library css css-animations css3 css3-animations helper helpers

Last synced: about 1 month ago
JSON representation

Vivify is free CSS animation library.

• Host: GitHub
• URL: https://github.com/martz90/vivify
• Owner: Martz90
• License: mit
• Created: 2017-08-26T06:08:03.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-07-19T06:33:42.000Z (over 2 years ago)
• Last Synced: 2024-10-12T15:43:01.530Z (about 1 month ago)
• Topics: animation, animation-library, css, css-animations, css3, css3-animations, helper, helpers
• Language: CSS
• Size: 17.6 KB
• Stars: 1,689
• Watchers: 45
• Forks: 149
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Vivify Logo](http://vivify.mkcreative.cz/assets/img/vivify.png)

[Vivify web presentation](http://vivify.mkcreative.cz)

Vivify is free CSS animation library.

## Usage

Simply include vivify css file into your document's ``````

```HTML

```

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](http://vivify.mkcreative.cz)

### 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.