Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jxnblk/vhs
Post-Future CSS Animations
https://github.com/jxnblk/vhs
Last synced: 18 days ago
JSON representation
Post-Future CSS Animations
- Host: GitHub
- URL: https://github.com/jxnblk/vhs
- Owner: jxnblk
- Archived: true
- Created: 2015-03-05T02:52:31.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-05T18:17:31.000Z (almost 8 years ago)
- Last Synced: 2024-09-01T02:49:23.311Z (2 months ago)
- Language: HTML
- Homepage: http://jxnblk.com/vhs/
- Size: 183 KB
- Stars: 184
- Watchers: 6
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VHS
Post-future CSS animations
```
npm install vhs
```
Or use the [CDN](http://d2v52k3cl9vedd.cloudfront.net/vhs/0.1.0/vhs.min.css)
```
```
## Blur
```html
.vhs-blur
```
## Blur Reverse
```html
.vhs-blur
```
## Flicker
```html
.vhs-flicker
```
## Flicker Reverse
```html
.vhs-flicker.vhs-reverse
```
## Zoom
```html
.vhs-zoom
```
## Zoom Reverse
```html
.vhs-zoom .vhs-reverse
```
## Fade
```html
.vhs-fade
```
## Fade Reverse
```html
.vhs-fade .vhs-reverse
```
### Pulsate Effect
```html
.vhs-fade .vhs-duration-6 .vhs-infinite .vhs-alternate
```
## Pop
```html
.vhs-pop
```
## Pop Reverse
```html
.vhs-pop .vhs-reverse
```
## Highlight
```html
.vhs-highlight
```
## Highlight Text
```html
.vhs-highlight-text
```
## Flash
```html
.vhs-flash
```
```html
.vhs-flash .vhs-duration-2
.vhs-flash .vhs-duration-3
.vhs-flash .vhs-duration-4
.vhs-flash .vhs-duration-5
.vhs-flash vhs-duration-6
```
## Left
```html
.vhs-left
```
## Left Reverse
```html
.vhs-left .vhs-reverse
```
## Right
```html
.vhs-right
```
## Right Reverse
```html
.vhs-right .vhs-reverse
```
## Top
```html
.vhs-top
```
## Top Reverse
```html
.vhs-top .vhs-reverse
```
## Bottom
```html
.vhs-bottom
```
## Bottom Reverse
```html
.vhs-bottom .vhs-reverse
```
---
## Highlight Pop
```html
.vhs-highlight-pop
```
## Utility
### Delay
class | description
---|---
.vhs-delay-1 | animation-delay: 1
.vhs-delay-2 | animation-delay: 2
.vhs-delay-3 | animation-delay: 3
.vhs-delay-4 | animation-delay: 4
.vhs-delay-5 | animation-delay: 5
.vhs-delay-5 | animation-delay: 6
### Duration
class | description
---|---
.vhs-duration-1 | animation-duration: 1
.vhs-duration-2 | animation-duration: 2
.vhs-duration-3 | animation-duration: 3
.vhs-duration-4 | animation-duration: 4
.vhs-duration-5 | animation-duration: 5
.vhs-duration-6 | animation-duration: 6
### Timing Function
class | description
---|---
.vhs-ease-in | animation-timing-function: ease-in
.vhs-ease-out | animation-timing-function: ease-out
.vhs-ease-in-out | animation-timing-function: ease-in-out
.vhs-linear | animation-timing-function: linear
### Iteration Count
class | description
---|---
.vhs-infinite | animation-iteration-count: infinite
### Direction
class | description
---|---
.vhs-reverse | animation-direction: reverse
.vhs-alternate | animation-direction: alternate
### Fill Mode
class | description
---|---
.vhs-fill-forwards | animation-fill-mode: forwards
.vhs-fill-backwards | animation-fill-mode: backwards
.vhs-fill-both | animation-fill-mode: both
### Play State
class | description
---|---
.vhs-paused | animation-play-state: paused