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
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.
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