Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update README #7

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Update README #7

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f9644f6
Readme fixes and remove broken links
sintacks-arrers Jul 19, 2022
5282f68
Update README.md
sintacks-arrers Jul 19, 2022
fbd523d
Update README.md
sintacks-arrers Jul 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 12 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
![Vivify Logo](http://vivify.mkcreative.cz/assets/img/vivify.png)

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

Vivify is free CSS animation library.
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!


## Usage
Simply include vivify css file into your document's ```<head>```
Simply include the vivify css file into your document's ```<head>```
```HTML
<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.
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.

### List of class names you can add
- ball
Expand Down Expand Up @@ -81,15 +86,3 @@ Add class ```vivify``` to the element you want to animate. If you want your anim
- 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.