UNPKG

roobie

Version:

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.

github.com/kgrewee/roobie

kgrewee/roobie

46 lines (43 loc) • 2.78 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# Bounce ## Classes ```html <span class="_bounce">Bounce</span> <span class="_bouncet">Bounce Top</span> <span class="_bounceb">Bounce Bottom</span> <span class="_bouncel">Bounce Left</span> <span class="_bouncer">Bounce Right</span> <span class="_bounceout">Bounce Out</span> <span class="_bounceoutt">Bounce Out Top</span> <span class="_bounceoutb">Bounce Out Bottom</span> <span class="_bounceoutl">Bounce Out Left</span> <span class="_bounceoutr">Bounce Out Right</span> ``` ## Usage <h2 id="animateMe" class="txtc _bouncet">Animate me</h2> <div class="div row wrp jst-center _bounceb"> <span class="btn" onclick="Animation.animationById('animateMe', '_bounce')">Bounce</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bouncet')">Bounce Top</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceb')">Bounce Bottom</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bouncel')">Bounce Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bouncer')">Bounce Right</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceout')">Bounce Out</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceoutt')">Bounce Out Top</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceoutb')">Bounce Out Bottom</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceoutl')">Bounce Out Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceoutr')">Bounce Out Right</span> </div> ```html <h2 id="animateMe" class="txtc _bouncet">Animate me</h2> <div class="div row wrp jst-center _bounceb"> <span class="btn" onclick="Animation.animationById('animateMe', '_bounce')">Bounce</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bouncet')">Bounce Top</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceb')">Bounce Bottom</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bouncel')">Bounce Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bouncer')">Bounce Right</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceout')">Bounce Out</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceoutt')">Bounce Out Top</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceoutb')">Bounce Out Bottom</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceoutl')">Bounce Out Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_bounceoutr')">Bounce Out Right</span> </div> ```