#Animations

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

Loading Spinner

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. Below are some modifiers of the loading spinner.

• hide-text - hides the text. Best used for when the loader covers underlying text.
• loading-white - sets the loading spinner's color to white.

To make the loading spinner align either left or right, add the loading-left or loading-right classes respectively.

Loading Button

These buttons are designed to tell users that a function is in progress. This is simply created by adding the animated loading classes to the button and it will automatically

<div class="col">
    <button class="animated loading u-center hide-text">1</button>
</div>
<div class="col">
    <button class="animated loading u-center loading-left btn-primary">Loading</button>
</div>
<div class="col">
    <button class="animated loading u-center loading-white hide-text" id="btn3">3</button>
</div>
<div class="col">
    <button class="animated loading u-center loading-right loading-white white" id="btn4">Loading</button>
</div>
<div class="col">
    <button class="animated loading u-center hide-text" id="btn5">5</button>
</div>

Hover Grow

Zoom in various elements to make the stand out from the rest. Just add hover-grow to your control.

FileBot

Illustrator

KeepassX

Pandora

Photoshop

PhpStorm

Python

Wing

<div class="content">
    <img src="res/img/autodesk_autocad.png" class="hover-grow"/>
    <p>Autodesk</p>
</div> 

#Infinite Animations

Pulse

This animation adds a pulsing animation to any component such as divs, images, buttons, etc.

Pulsing animation with Font Awesome

<div class="u-text-center">
    <i class="fa fa-wrapper fa-heart animated pulse large paused" id="pulse-heart" aria-hidden="true"></i>
</div>

Pulsing animation with a div

 <div class="content u-text-center animated pulse paused" id="pulse-div" style="background: #f03d4d; color: white">
    <p>This is a div!</p>
    </div>

Pulsing animation with a button

<div class="u-text-center">
    <button class="btn-primary animated pulse paused" id="pulse-btn">Click me!</button>
    </div>

#Entrance Animations

Bounce

Bouncing animation with Font Awesome

 <div class="u-text-center">
    <i class="fa fa-wrapper fa-heart animated bounce large" id="bounce-heart" aria-hidden="true"></i>
</div>

Bouncing animation with a div

<div class="content u-text-center animated bounce" id="bounce-div" style="background: #f03d4d; color: white">
    <p>This is a div!</p>
</div> 

Bouncing animation with a button

<div class="u-text-center">
    <button class="btn-primary animated bounce" id="bounce-btn">Click me!</button>
</div>

Bounce In

Bounce in animation with Font Awesome

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

Bounce in animation with a div

 <div class="content u-text-center animated bounceIn" id="bounceIn-div" style="background: #f03d4d; color: white">
        <p>This is a div!</p>
    </div>

Bounce in animation with a button

<button class="btn-primary animated bounceIn" id="bounceIn-btn">Click me!</button>

Fade In

Fade in animation with Font Awesome

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

Fade in animation with a div

<div class="content u-text-center animated fadeIn" id="fadeIn-div" style="background: #f03d4d; color: white">
    <p>This is a div!</p>
</div>

Fade in animation with a button

<button class="btn-primary animated fadeIn" id="fadeIn-btn">Click me!</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>

• Next

  Buttons