roobie/docs/animations/misc.md

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

# Misc
Animations that don't fit into any other category.

## Classes
```html
<span class="_flash">Flash</span>
<span class="_glow">Glow</span>
<span class="_heartbeat">Heartbeat</span>
<span class="_hinge">Hinge</span>
<span class="_jello">Jello</span>
<span class="_pop">Pop</span>
<span class="_pulse">Pulse</span>
<span class="_rabid">Rabid</span>
<span class="_roll">Roll</span>
<span class="_rollout">Roll Out</span>
<span class="_rotate">Rotate</span>
<span class="_rotateout">Rotate Out</span>
<span class="_shake">Shake</span>
<span class="_stretch">Stretch</span>
<span class="_swing">Swing</span>
<span class="_wobble">Wobble</span>
```

## Usage
<h2 id="animateMe" class="txtc _jello">Animate me</h2>
<div class="div row wrp jst-center _stretch">
    <span class="btn" onclick="Animation.animationById('animateMe', '_flash')">Flash</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_glow')">Glow</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_heartbeat')">Heartbeat</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_hinge')">Hinge</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_jello')">Jello</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_pop')">Pop</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_pulse')">Pulse</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_rabid')">Rabid</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_roll')">Roll</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_rollout')">Roll Out</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_rotate')">Rotate</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_rotateout')">Rotate Out</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_shake')">Shake</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_stretch')">Stretch</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_swing')">Swing</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_wobble')">Wobble</span>
</div>

```html
<h2 id="animateMe" class="txtc _jello">Animate me</h2>
<div class="div row wrp jst-center _stretch">
    <span class="btn" onclick="Animation.animationById('animateMe', '_flash')">Flash</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_glow')">Glow</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_heartbeat')">Heartbeat</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_hinge')">Hinge</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_jello')">Jello</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_pop')">Pop</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_pulse')">Pulse</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_rabid')">Rabid</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_roll')">Roll</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_rollout')">Roll Out</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_rotate')">Rotate</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_rotateout')">Rotate Out</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_shake')">Shake</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_stretch')">Stretch</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_swing')">Swing</span>
    <span class="btn" onclick="Animation.animationById('animateMe', '_wobble')">Wobble</span>
</div>
```