Animation

Contrast Bootstrap Animations are illusions of motions for web elements. +70 animations generated by CSS only and works properly on every browser.

Simple Usage

Using our animation is simple. Wrap the content you want to animate into the Animation component and specify its type. Check out the API section for more advanced options!

######html

  <div class="animated bounce infinite">
    <img src="../img/ball.png" alt="" style="width: 50px;height:50px;"/>
  </div>
  <div class="animated flash infinite">
    <img src="../img/ball.png" alt="" style="width: 50px;height:50px;"/>
  </div>
  <div class="animated pulse infinite">
    <img src="../img/ball.png" alt="" style="width: 50px;height:50px;"/>
  </div>
  <div class="animated rubberBand infinite">
    <img src="../img/ball.png" alt="" style="width: 50px;height:50px;"/>
  </div>
  <div class="animated shake infinite">
    <img src="../img/ball.png" alt="" style="width: 50px;height:50px;"/>
  </div>
  <div class="animated headShake infinite">
    <img src="../img/ball.png" alt="" style="width: 50px;height:50px;"/>
  </div>
  <div class="animated swing infinite">
    <img src="../img/ball.png" alt="" style="width: 50px;height:50px;"/>
  </div>
  <div class="animated tada infinite">
    <img src="../img/ball.png" alt="" style="width: 50px;height:50px;"/>
  </div>
  <div class="animated wobble infinite">
    <img src="../img/ball.png" alt="" style="width: 50px;height:50px;"/>
  </div>
  <div class="animated jello infinite">
    <img src="../img/ball.png" alt="" style="width: 50px;height:50px;"/>
  </div>
  <div class="animated heartBeat infinite">
    <img src="../img/ball.png" alt="" style="width: 50px;height:50px;"/>
  </div>

API

Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.

Contrast Animation Bootstrap Modules used

import {AnimationModule } from 'cdb';

API Reference: Contrast Animation Inputs

The table below shows the possible input of the Animation component.