https://github.com/jxnblk/vhs

Post-Future CSS Animations
https://github.com/jxnblk/vhs

Last synced: 2 months 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 (over 7 years ago)
• Last Synced: 2024-04-09T14:34:03.893Z (3 months ago)
• Language: HTML
• Homepage: http://jxnblk.com/vhs/
• Size: 183 KB
• Stars: 185
• Watchers: 6
• Forks: 17
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-stars - vhs - Post-Future CSS Animations (HTML)

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