Summarize this article with:
Static websites feel dated. Users expect motion, feedback, visual cues that something is happening.
Bootstrap animations examples show you exactly how to add fade effects, slide transitions, and hover states to your projects without writing everything from scratch.
This guide covers the animation types built into Bootstrap 5, how to integrate external libraries like Animate.css and GSAP, and performance tricks that keep your site running at 60fps.
You’ll find working code snippets for buttons, cards, modals, and navigation components.
Copy them directly into your project. Modify the timing and easing to match your design system. Ship faster.
What is Bootstrap Animation
Bootstrap animation is a motion effect applied to HTML elements using the Bootstrap framework.
These animations run through CSS keyframes, utility classes, and JavaScript event triggers.
Common types include fade effects, slide transitions, zoom transformations, bounce movements, and rotate effects.
Bootstrap 5 ships with built-in transition classes. For complex animations, developers pair the framework with external libraries like Animate.css or GSAP.
Bootstrap animations examples
Loader CSS – Materail Design Animation Example
See the Pen
Loader CSS by Chintu Yadav Sara (@chintuyadav)
on CodePen.
Bootstrap Bounce Animation Example
See the Pen
[WIP] Bouncing Arrow Animation by Colin (@colinkeany)
on CodePen.
Animated Coming Soon Template
Rent a Scooter Showcase
Falling Stars Animation snippets
Bootstrap Background Animation
See the Pen
Background Animation by Isaac Suttell (@isuttell)
on CodePen.
Scrolling Letters Animation
Bootstrap 5 Animated 3d social icons Snippets
Induste – Industrial & Factory Bootstrap 5 Template
Sun-Earth rotation animation
Architecture Portfolio Showcase
Bootstrap Product Page Animation
See the Pen
Product Page | CSS Keyframes Animation by Kaio Almeida (@KaioRocha)
on CodePen.
404 – Animated Page Mega Pack
Decorative Letter Animations – Typography Animation Effects
Pure CSS Text Animation snippets example
Trax – One Page Parallax
Material Design & Bootstrap 4
See the Pen
Bootstrap Animations – Material Design & Bootstrap 4 by MDBootstrap (@mdbootstrap)
on CodePen.
Gradient Animation Login Form Snippet
How Does Bootstrap Handle Animations
Bootstrap uses a combination of CSS transitions and JavaScript to control motion effects across components.
What CSS Properties Control Bootstrap Animations
The transform property handles movement, scaling, and rotation. Opacity controls fade effects. Transition-duration sets how long animations run.
How Do Bootstrap Utility Classes Apply Animation Effects
Classes like .fade and .collapse come ready to use. Add .show to trigger visibility changes with smooth transitions.
What Role Does JavaScript Play in Bootstrap Animations
JavaScript handles event listeners and DOM manipulation for animation triggers. Bootstrap’s JS modules manage state changes on modals, dropdowns, and collapsible elements.
What Are the Types of Bootstrap Animations
Six core animation types cover most user experience needs in web projects.
Fade Animations
Fade in and fade out effects change element opacity from 0 to 1 or reverse. Bootstrap’s native .fade class pairs with .show for this effect.
Slide Animations
Slide animations move elements along the X or Y axis. Used heavily in navigation bars, off-canvas menus, and accordion panels.
Zoom Animations
Scale transform increases or decreases element size. Popular for image galleries and hover effects on clickable elements.
Bounce Animations
Bounce effects use cubic-bezier easing to create a spring-like motion. Great for drawing attention to notifications or call-to-action buttons.
Rotate Animations
Rotation transforms spin elements around a fixed point. Loading spinners and icon animations rely on this technique.
Flip Animations
Flip effects rotate elements 180 degrees on the X or Y axis. Card flip reveals and toggle states use this pattern frequently.
How to Add Animations to Bootstrap Components
Each Bootstrap component accepts animation classes differently. Here’s how to apply motion to the most common elements.
How to Animate Bootstrap Buttons
Add hover state animations using transform scale or background-color transitions on Bootstrap buttons.
Pulse animations work well for primary CTAs.
How to Animate Bootstrap Cards
Bootstrap cards respond well to hover lift effects. Apply translateY with box-shadow changes for depth.
How to Animate Bootstrap Modals
The Bootstrap modal component includes fade animation by default. Swap in slide or zoom effects by overriding the .modal.fade class.
How to Animate Bootstrap Navigation Menus
Navbar dropdowns accept custom transition timing. Mobile menu toggles benefit from slide-down animations with animation-duration between 200-300ms.
How to Animate Bootstrap Carousels
The Bootstrap carousel supports slide and crossfade transitions natively. Add .carousel-fade class to switch from sliding to fading between items.
What Are Bootstrap Animation Libraries
External CSS animation libraries extend Bootstrap’s built-in capabilities with pre-built effects.
Animate.css with Bootstrap
Animate.css provides 80+ ready-made animations. Add classes like animatefadeInUp or animatebounceIn directly to Bootstrap elements.
File size is around 80KB uncompressed.
AOS (Animate on Scroll) with Bootstrap
AOS triggers animations when elements enter the viewport. Uses data attributes like data-aos="fade-up" for configuration.
Intersection Observer handles scroll detection.
GSAP with Bootstrap
GreenSock Animation Platform offers timeline-based sequencing and fine control. Heavier than CSS-only options but handles complex micro-interactions better.
Hover.css with Bootstrap
Hover.css focuses exclusively on hover state effects. Lightweight at 28KB, it adds 2D transitions, background animations, and border effects to interactive elements.
How to Create Custom Bootstrap Animations
Bootstrap’s built-in transitions cover basics. Custom animations require writing your own keyframes and transform rules.
How to Write CSS Keyframes for Bootstrap
Define keyframes with @keyframes rule, then apply via CSS animation property.
“ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.custom-fade-up { animation: fadeInUp 0.4s ease-out; } `
How to Use Transform Properties with Bootstrap
Transform functions include translate, scale, rotate, and skew. Combine multiple transforms in one declaration separated by spaces.
Set transform-origin to control the pivot point for rotations and scaling.
How to Control Animation Timing and Duration
Key properties: animation-duration, animation-delay, animation-iteration-count, animation-fill-mode.
Use cubic-bezier for custom easing curves. Standard options: ease, ease-in, ease-out, ease-in-out, linear.
How to Trigger Animations on Scroll
Intersection Observer API detects when elements enter the viewport. Add animation classes dynamically via JavaScript when threshold is met.
` const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate'); } }); }, { threshold: 0.1 });
document.querySelectorAll(‘.animate-on-scroll’) .forEach(el => observer.observe(el)); `
What Are Bootstrap Animation Performance Considerations
Poorly optimized animations cause jank, dropped frames, and battery drain on mobile devices.
How to Reduce Animation Lag
Stick to transform and opacity properties only. Avoid animating width, height, margin, padding, top, left.
Use will-change: transform sparingly to hint browser optimization.
What CSS Properties Are GPU-Accelerated
GPU-accelerated properties run on the compositor thread:
- transform (translate, scale, rotate)
- opacity
- filter
Everything else triggers layout recalculation. Expensive for performance.
How to Test Animation Performance
Chrome DevTools Performance panel records frame rates. Target 60fps minimum. Enable “Paint flashing” to visualize repaints.
Test on mid-range Android devices, not just desktop. Check cross-browser compatibility in Firefox and Safari.
Bootstrap Animation Code Examples
Working code snippets ready for copy-paste into your Bootstrap project.
Fade-In Animation Example
` <style> .fade-in { opacity: 0; animation: fadeIn 0.5s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } } </style>
<div class=”card fade-in”> <div class=”card-body”>Content here</div> </div> `
Slide-Up Animation Example
` <style> .slide-up { transform: translateY(30px); opacity: 0; animation: slideUp 0.4s ease-out forwards; }
@keyframes slideUp { to { transform: translateY(0); opacity: 1; } } </style>
<div class=”alert alert-success slide-up”> Saved successfully </div> `
Pulse Animation Example
Pulse draws attention to call-to-action buttons and notifications.
` <style> .pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } </style>
<button class=”btn btn-primary pulse”> Sign Up Now </button> `
Shake Animation Example
Shake indicates errors on form validation or invalid input fields.
` <style> .shake { animation: shake 0.5s ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } } </style>
<input type=”email” class=”form-control shake” placeholder=”Enter valid email”> `
Add the .shake class via JavaScript when validation fails, then remove after animation completes using animationend event listener.
FAQ on Bootstrap Animations Examples
Does Bootstrap 5 have built-in animations?
Bootstrap 5 includes basic transition classes like .fade, .collapse, and .carousel-fade. These handle simple opacity and height changes. For complex keyframe animations, you need custom CSS or external libraries like Animate.css.
How do I add fade animation to Bootstrap elements?
Add the .fade class to your element. Toggle the .show class via JavaScript to trigger the opacity transition. Bootstrap modals and alerts use this pattern by default for smooth visibility changes.
What is the best animation library for Bootstrap?
Animate.css works best for simple effects with minimal setup. GSAP handles complex sequenced animations. AOS triggers animations on scroll. Choose based on project complexity and performance requirements.
How do I animate Bootstrap cards on hover?
Apply CSS transitions to transform and box-shadow properties. Use translateY(-5px) with increased shadow on hover state. This creates a lift effect that provides visual feedback without JavaScript. Check card hover effect examples for more patterns.
Why are my Bootstrap animations laggy?
Animating width, height, or margin triggers layout recalculation. Stick to transform and opacity properties only. These run on the GPU compositor thread. Add will-change: transform for complex animations.
How do I trigger animations when scrolling?
Use Intersection Observer API or the AOS library. Both detect when elements enter the viewport. Add animation classes dynamically when threshold conditions are met. Set appropriate delay values for staggered reveal effects.
Can I use Bootstrap animations with React or Vue?
Yes. Bootstrap’s CSS animations work in any framework. For React, use react-bootstrap with CSS transitions. Vue users can combine Bootstrap classes with Vue's component for enter and leave animations.
How do I make Bootstrap dropdown animate?
Override the Bootstrap dropdown default styles. Add transform: translateY(10px) and opacity: 0 to .dropdown-menu. Transition both properties to zero on .show state for a slide-fade effect.
What animation duration works best for UI elements?
Use 150-300ms for hover states and micro-interactions. Modal and page transitions work well at 300-500ms. Loading spinners run 1-2 seconds per cycle. Faster feels snappy, slower feels smooth.
How do I disable Bootstrap animations for accessibility?
Respect the prefers-reduced-motion media query. Wrap animation rules inside @media (prefers-reduced-motion: no-preference). Users with vestibular disorders or motion sensitivity can then browse without triggering animations.
Conclusion
These Bootstrap animations examples give you a solid foundation for adding motion to any web project.
Start with the native transition classes. Add custom keyframe animations when you need more control over timing and easing functions.
Keep performance in mind. Stick to transform and opacity properties for smooth 60fps rendering on mobile devices.
Test with Chrome DevTools. Watch for layout thrashing. Respect prefers-reduced-motion` for users who need it.
The AOS library handles scroll-triggered reveals with minimal setup. GSAP offers timeline sequencing for complex interactions.
Pick the right tool for your use case. Copy the code snippets, adjust the animation duration and cubic-bezier values, and ship.
