Animation

Angular Bootstrap Animation

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

Importing the Angular Bootstrap Animation Module

typescript

import {AnimationModule } from 'cdbangular';

Using the Contrast Angular Bootstrap Animation

Use the type prop to specify what type animation you want in your app, set the [infinite] prop to true r]to keep the animation going on forever.

Angular Bootstrap Animation

html

<CDBAnimation type="bounce" [infinite]=true>
    <img alt="Angular Bootstrap Animation Bounce" src="https://pngimg.com/uploads/football/football_PNG52775.png" width="50" height="50" />
</CDBAnimation>
<CDBAnimation type="flash" [infinite]=true>
    <img alt="Angular Bootstrap Animation Flash" src="https://pngimg.com/uploads/football/football_PNG52775.png" width="50" height="50" />
</CDBAnimation>
<CDBAnimation type="pulse" [infinite]=true>
    <img alt="Angular Bootstrap Animation Pulse" src="https://pngimg.com/uploads/football/football_PNG52775.png" width="50" height="50" />
</CDBAnimation>
<CDBAnimation type="rubberBand" [infinite]=true>
    <img alt="Angular Bootstrap Animation Rubberband" src="https://pngimg.com/uploads/football/football_PNG52775.png" width="50" height="50" />
</CDBAnimation>
<CDBAnimation type="shake" [infinite]=true>
    <img alt="Angular Bootstrap Animation Shake" src="https://pngimg.com/uploads/football/football_PNG52775.png" width="50" height="50" />
</CDBAnimation>
<CDBAnimation type="headShake" [infinite]=true>
    <img alt="Angular Bootstrap Animation HeadShake" src="https://pngimg.com/uploads/football/football_PNG52775.png" width="50" height="50" />
</CDBAnimation>
<CDBAnimation type="swing" [infinite]=true>
    <img alt="Angular Bootstrap Animation Swing" src="https://pngimg.com/uploads/football/football_PNG52775.png" width="50" height="50" />
</CDBAnimation>
<CDBAnimation type="tada" [infinite]=true>
    <img alt="Angular Bootstrap Animation Tada" src="https://pngimg.com/uploads/football/football_PNG52775.png" width="50" height="50" />
</CDBAnimation>
<CDBAnimation type="wobble" [infinite]=true>
    <img alt="Angular Bootstrap Animation Wobble" src="https://pngimg.com/uploads/football/football_PNG52775.png" width="50" height="50" />
</CDBAnimation>
<CDBAnimation type="jello" [infinite]=true>
    <img alt="Angular Bootstrap Animation Jello" src="https://pngimg.com/uploads/football/football_PNG52775.png" width="50" height="50" />
</CDBAnimation>
<CDBAnimation type="heartBeat" [infinite]=true>
    <img alt="Angular Bootstrap Animation HeartBeat" src="https://pngimg.com/uploads/football/football_PNG52775.png" width="50" height="50" />
</CDBAnimation>

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.

API Reference: Contrast Animation Properties

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

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
infinite	Boolean	false	Makes an animation go for eternity. Note: it overwrites the `count` prop	infinite=true
type	String		This prop defines the kind of animation desired	type="tada"

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Widgets

Autocomplete