Search...

Animation

Bootstrap 5 Animation

Bootstrap 5 Animations give the illusion of movement on web elements. Over 70+ animations were written in CSS and tested to have all browsers support.

The Bootstrap Animation can be used to animate web elements by adding a class with the value animate. Additionally, we add other classes to our elements which are the type of animation (e.g., bounce, flash, pulse, etc. ) and the duration of the the animation.

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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner