Animated

Lucca UI comes with a library of pre-made css animations. To apply them to any element, add these classes: lui animated {optionalDirection} {animationStyle} {in | out}. For example, to have an element "scale up when appearing": class="lui animated up scale in".

To have an animation loop infinitely, just add the infinitely class to the element.

Animation styles - entrances & exits

Fade

Description: translates from a direction and fades. Must be given a direction: [left | right | up | down]

class="lui animated left fade in" -- elements translates from the left while fading in class="lui animated up fade out" -- elements translates away top while fading out

Slide

Description: slides from a direction while being resized. Must be given a direction: [left | right | up | down]

class="lui animated left slide in" -- elements slides in from the left while being resized class="lui animated up slide out" -- elements slides away top while being resized

Scale

Description: scales from a direction while fading. Must be given a direction: [left | right | up | down]

class="lui animated left scale in" -- elements scales up from the left while fading class="lui animated up scale out" -- elements scales down to the top while fading

Animation styles - static

Bounce

class="lui animated bounce"

Pulse

class="lui animated pulse"