Skip to content

Latest commit

 

History

History
68 lines (48 loc) · 1.82 KB

README.md

File metadata and controls

68 lines (48 loc) · 1.82 KB
Raw

Woah!!!

Woah.css

CSS Animation Library for eccentric web developers.

View demo here: http://www.joerezendes.com/projects/Woah.css/

Write up: https://medium.com/@joerezendes_91375/need-stars-on-github-21a2fab3550d

Official documentation: http://www.joerezendes.com/projects/woah.css/docs/docs/#/

Installation

To install via npm, simply do the following:

$ npm install woah.css --save

To install via Bower, simply do the following:

$ bower install woah.css --save

How to use

Download woah.css and put it in your documents head.

<head>
  <link rel="stylesheet" href="/woah.css">
</head>

Due to some (Overly) Elaborate animations, like scaleOut, you need to include this link after your main stylesheet.

Adding Animations

To animate an element, simply add the class woah followed by whichever animation you choose. Example:

<h1 class="woah wowzors">Hello world</h1>

Iterate Animations Forever

Want to repeat your animations for all of eternity? Use the infinite class. Example:

<h1 class="woah wowzors infinite">Woah</h1>

Different types of animations

Woah.css has three different types of animations to choose from.

  • Woah animations -- These are very eccentric and barely practical, but are very fun and showy.

  • Wow animations -- These are still a little eccentric, but could very well be used in normal websites.

  • Normie animations -- These are very basic.

To Do List

  • Add CSS Variables to easily change duration with inline styles
  • More animations that make use of pseudo elements, Ex: dealWithIt
  • Cross browser functionality

Vue Woah

@andrewgardhouse ported Woah.css over to Vue. Check it out here:

https://github.com/AndrewGardhouse/vue-woah