Animation

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

Simple Usages

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!

import React from "react";
import { CDBAnimation, CDBContainer } from "cdbreact";
export const Animation = () => {
  return (
    <CDBContainer>
          <CDBAnimation type="bounce" infinite>
            <img alt="" src="img/ball.png" width="50" height="50" />
          </CDBAnimation>
          <CDBAnimation type="flash" infinite>
            <img alt="" src="img/ball.png" width="50" height="50" />
          </CDBAnimation>
          <CDBAnimation type="pulse" infinite>
            <img alt="" src="img/ball.png" width="50" height="50" />
          </CDBAnimation>
          <CDBAnimation type="rubberBand" infinite>
            <img alt="" src="img/ball.png" width="50" height="50" />
          </CDBAnimation>
          <CDBAnimation type="shake" infinite>
            <img alt="" src="img/ball.png" width="50" height="50" />
          </CDBAnimation>
          <CDBAnimation type="headShake" infinite>
            <img alt="" src="img/ball.png" width="50" height="50" />
          </CDBAnimation>
          <CDBAnimation type="swing" infinite>
            <img alt="" src="img/ball.png" width="50" height="50" />
          </CDBAnimation>
          <CDBAnimation type="tada" infinite>
            <img alt="" src="img/ball.png" width="50" height="50" />
          </CDBAnimation>
          <CDBAnimation type="wobble" infinite>
            <img alt="" src="img/ball.png" width="50" height="50" />
          </CDBAnimation>
          <CDBAnimation type="jello" infinite>
            <img alt="" src="img/ball.png" width="50" height="50" />
          </CDBAnimation>
          <CDBAnimation type="heartBeat" infinite>
            <img alt="" src="img/ball.png" width="50" height="50" />
          </CDBAnimation>
    </CDBContainer>
  );
};

API

In this section you will find advanced information about the Animation component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Animation Import Statement

You need to import the Contrast Animation component first before using it.

import { CDBAnimation } from "cdbreact";

API Reference: Contrast Animation Properties

The table below shows the configuration options of the CDBAnimation component.

Name	Type	Default	Description	Example
className	String	Adds custom classes	Adds custom classes	<CDBAnimation className="myClass" ... />
tag	function or String	div	Changes default input tag	<CDBAnimation tag="input" ... />
count	Number	1	The number of iterations the animation should have	<CDBAnimation count="{2}" .../>
delay	String		Sets the amount of time that should pass before the initial iteration of animation, takes a string consisting of a number and a unit indicator (`s`/`ms`)	<CDBAnimation delay="3s" .../>
duration	String or Number	1	Defines the speed of animation, takes a string consisting of a number and a unit indicator (`s`/`ms`)	<CDBAnimation duration="3s" .../>
infinite	Boolean	false	Makes an animation go for eternity. Note: it overwrites the `count` prop	<CDBAnimation infinite .../>
onAnimationStart	function		Fires once an animation starts	<CDBAnimation onAnimationStart={handleAnimationStart} .../>
onAnimationIteration	function		Function gets executed every time an animation happens. To have things happening only on particular iterations (say, every time for the first five times and then every fifth one), it is enough to create a variable being incremented within a function and to define a simple `if` statement to see, whether the ongoing iteration number fulfills the requirement (example `if (count < 6 && count > 5){yourFunction}`)	<CDBAnimation onAnimationIteration={yourFunction} .../>
onAnimationEnd	function		Fires at the final iteration of an animation	<CDBAnimation onAnimationEnd={handleAnimationEnd} .../>
reveal	Boolean	false	Setting this option makes the component postpone the animation till the viewport reaches it's relative position	<CDBAnimation reveal .../>
type	String		This prop defines the kind of animation desired	<CDBAnimation type="tada" .../>

Accordion

Autocomplete