Cirrus

#Animations

Animations are an essential part crafting beautiful websites that aren't just stunning, but are also alive. Cirrus comes bundled with animated components to help you get started.

#Loading

The loading spinner serves as an elegant indicator for progress in webpages. Just add the animated loading selectors to the element and Cirrus will handle the rest.

By default, the spinner will be horizontally centered and it will override any text. To hide the text, just add the hide-text class.

Hidden

<div class="card u-flex u-items-center u-justify-center">
    <div class="animated loading hide-text">
        <p>Hidden</p>
    </div>
</div>

The spinner's color could also be changed to white with the loading-white class.

Hidden

<div class="card u-flex u-items-center u-justify-center" style="background: linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224));">
    <div class="animated loading hide-text loading-white">
        <p>Hidden</p>
    </div>
</div>

To show the spinner to the left, use the loading-left class.

loading-left

<div class="card u-flex u-items-center u-justify-center" style="background: linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224));">
    <div class="animated loading hide-text loading-white">
        <p>Hidden</p>
    </div>
</div>

For the right, use the loading-right class.

loading-right

<div class="card" style="background: linear-gradient(to right, rgb(255, 88, 88), rgb(248, 87, 166));">
    <div class="animated loading loading-right loading-white white u-text-right">
        <p>loading-right</p>
    </div>
</div>

#Hover Grow

This is a subtle animation that enlarges a given element on hover. Just add the hover-grow class to your element.

Hover me.
<div class="hover-grow">
    <img src="../../card.svg" />
</div>

#Entrance Animations

These are animations that only run once when the page is loaded or the class is toggled.

Bounce

Bouncing animation with a glyph.

<span class="icon"><i class="fa fa-wrapper fa-heart animated bounce" aria-hidden="true"></i></span>

Bouncing animation with a div.

This is a div!

<div class="bg-orange-400 white u-text-center animated bounce">
    <p>This is a div!</p>
</div>

Bouncing animation with a button.

<button class="btn-info animated bounce">Button</button>
Bounce In

Bounce in animation with a glyph.

<span class="icon"><i class="fa fa-wrapper fa-heart animated bounceIn" aria-hidden="true"></i></span>

Bounce in animation with a div.

This is a div!

<div class="bg-orange-400 white u-text-center animated bounceIn">
    <p>This is a div!</p>
</div>

Bounce in animation with a button.

<button class="btn-info animated bounceIn">Button</button>
Fade In

Fade in animation with a glyph.

<span class="icon"><i class="fa fa-wrapper fa-heart animated fadeIn" aria-hidden="true"></i></span>

Fade in animation with a div.

This is a div!

<div class="bg-orange-400 white u-text-center animated fadeIn">
    <p>This is a div!</p>
</div>

Fade in animation with a button.

<button class="btn-info animated fadeIn">Button</button>

#Infinite Animations

These are animations that only run continuously.

Pulse

Pulse animation with a glyph.

<span class="icon"><i class="fa fa-wrapper fa-heart animated pulse" aria-hidden="true"></i></span>

Pulse animation with a div.

This is a div!

<div class="bg-orange-400 white u-text-center animated pulse">
    <p>This is a div!</p>
</div>

Pulse animation with a button.

<button class="btn-info animated pulse">Button</button>

#Animation Utils

Cirrus comes with a couple of tools you can use to help test or modify animation behavior.

Infinite Animation

This will sustain an animation when the user is on the page. This even works for animations not designed to be infinitely looped. The only change needed is the addition of the infinite class to the component.

Below is an example using the fade in animation.

<button class="btn-primary animated fadeIn infinite">Infinitely Fading</button>

Now this animation seems to cut off at the end of the cycle. To make it alternate, just add the alternate class to make the animation more fluid.

<button class="btn-primary animated fadeIn infinite alternate">Alternating Fading</button>
Pausing Animations

This is great with testing your animations and works well with JavaScript calls also. All you need to do is add a class to the animated component called paused.

<button class="btn-primary animated bounce infinite alternate paused">Paused</button>