<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--FONT AWESOME CDN LINK FOR FONT-AWESOME FONT -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<i class="fa fa-chevron-down faa-vertical animated"></i>
</a>
<a tabindex="0" class="navbar-brand faa-pulse faa-slow animated" data-toggle="popover" data-trigger="focus" data-html="true" data-placement="bottom" data-title="Brand Quote..." data-content="<img class='img-responsive' height='140' width='140' src='data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='/<p>Your Brand Image</p>">
<i class="fa fa-balance-scale"></i>
<i class="fa fa-lg">B</i>
<i class="fa fa-lg">r</i>
<i class="fa fa-lg">a</i>
<i class="fa fa-lg">n</i>
<i class="fa fa-lg">D</i>
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a class="faa-parent animated-hover">
<i class="fa fa-fw fa-lg fa-home faa-tada faa-fast"></i>Home
</a>
</li>
<li>
<a class="faa-parent animated-hover">
<i class="fa fa-fw fa-lg fa-quote-left faa-tada faa-fast"></i>About Us
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle faa-parent animated-hover" data-toggle="dropdown">
<i class="fa fa-fw fa-lg fa-th faa-tada faa-fast"></i>Products
<span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a class="faa-parent animated-hover">
<i class="fa fa-fw fa-level-down faa-tada faa-fast"></i>Portfolio
</a>
</li>
<li>
<a class="faa-parent animated-hover">
<i class="fa fa-fw fa-external-link faa-tada faa-fast"></i>Individual
</a>
</li>
<li>
<a class="faa-parent animated-hover">
<i class="fa fa-fw fa-search faa-tada faa-fast"></i>Search
</a>
</li>
<li>
<a class="faa-parent animated-hover">
<i class="fa fa-fw fa-file-pdf-o faa-tada faa-fast"></i>Product Detail
</a>
</li>
<li class="divider"></li>
<li>
<a class="faa-parent animated-hover">
<i class="fa fa-fw fa-flag faa-tada faa-fast"></i>Specification
</a>
</li>
</ul>
</li>
<li>
<a class="faa-parent animated-hover">
<i class="fa fa-fw fa-lg fa-map-marker faa-tada faa-fast"></i>Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="faa-parent animated-hover">
<i class="fa fa-fw fa-lg fa-sign-in faa-tada faa-fast"></i>LogIn
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="col-xs-12 hl-left">
<h2 class="text-center">Some Animation Class From Font Awesome Animation</h2>
<div class="progress active" style="height:5px;">
<div class="progress-bar progress-bar-striped progress-devider progress-bar-success"></div>
<div class="progress-bar progress-bar-striped progress-devider progress-bar-primary"></div>
<div class="progress-bar progress-bar-striped progress-devider progress-bar-danger"></div>
<div class="progress-bar progress-bar-striped progress-devider progress-bar-info"></div>
<div class="progress-bar progress-bar-striped progress-devider"></div>
<div class="progress-bar progress-bar-striped progress-devider progress-bar-info"></div>
<div class="progress-bar progress-bar-striped progress-devider progress-bar-danger"></div>
<div class="progress-bar progress-bar-striped progress-devider progress-bar-primary"></div>
<div class="progress-bar progress-bar-striped progress-devider progress-bar-success"></div>
</div>
Add the desired CSS class to the icon (or any element of your DOM).<br/>
For parent hover, add the CSS class faa-parent and animated-hover on the parent.</br>
You can regulate the speed of the animation by adding the CSS class faa-fast or faa-slow.</br>
<div>
<div class="col-md-12">
<div class="col-md-4">
<h3>
On DOM load
</h3>
</div>
<div class="col-md-4">
<h3>
On hover
</h3>
</div>
<div class="col-md-4">
<h3>
On parent hover
</h3>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-wrench faa-wrench animated"></i> faa-wrench animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-wrench faa-wrench animated-hover"></i> faa-wrench animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-wrench faa-wrench"></i> faa-wrench
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-bell faa-ring animated"></i> faa-ring animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-bell faa-ring animated-hover"></i> faa-ring animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-bell faa-ring"></i> faa-ring
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-horizontal animated"></i> faa-horizontal animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-horizontal animated-hover"></i> faa-horizontal animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-envelope faa-horizontal"></i> faa-horizontal
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-vertical animated"></i> faa-vertical animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i> faa-vertical animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-thumbs-o-up faa-vertical"></i> faa-vertical
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-warning faa-flash animated"></i> faa-flash animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-warning faa-flash animated-hover"></i> faa-flash animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-warning faa-flash"></i> faa-flash
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-bounce animated"></i> faa-bounce animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i> faa-bounce animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-thumbs-o-up faa-bounce"></i> faa-bounce
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-spinner faa-spin animated"></i> faa-spin animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-spinner faa-spin animated-hover"></i> faa-spin animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-spinner faa-spin"></i> faa-spin
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-plane faa-float animated"></i> faa-float animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-plane faa-float animated-hover"></i> faa-float animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-plane faa-float"></i> faa-float
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-heart faa-pulse animated"></i> faa-pulse animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-heart faa-pulse animated-hover"></i> faa-pulse animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-heart faa-pulse"></i> faa-pulse
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-shake animated"></i> faa-shake animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-shake animated-hover"></i> faa-shake animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-envelope faa-shake"></i> faa-shake
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-trophy faa-tada animated"></i> faa-tada animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-trophy faa-tada animated-hover"></i> faa-tada animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-trophy faa-tada"></i> faa-tada
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing animated"></i> faa-passing animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing animated-hover"></i> faa-passing animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-space-shuttle faa-passing"></i> faa-passing
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing-reverse animated"></i> faa-passing-reverse animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing-reverse animated-hover"></i> faa-passing-reverse animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-space-shuttle faa-passing-reverse"></i> faa-passing-reverse
</a>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-circle-o faa-burst animated"></i> faa-burst animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-circle-o faa-burst animated-hover"></i> faa-burst animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-circle-o faa-burst"></i> faa-burst
</a>
</div>
</div>
</div>
</div>
</div>
.dropdown-menu>li>a,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav >.active>a,
.navbar-default .navbar-header>a,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>li>a
{
color:#2C3E50;
transition:all 1s;
-o-transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s
}
.dropdown-menu>li>a:hover,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav >.active>a,
.navbar-default .navbar-header>a:hover,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover
{
color:#FFFFFF;
background:#2C3E50
}
a
{
cursor:pointer;
}
a:hover .fa
{
-webkit-animation:fa-spin 1s;animation:fa-spin 1s
}
.hl-left
{
border:1px dotted #5C4383;
border-left:5px solid #5C4383;
padding:30px;
border-radius:10px;
margin-bottom:60px;
background-color:#FBFBFB;
}
.progress-devider
{
width: 11.11111111111111%;
}
/*
* Font Awesome Animation
*/
/* WRENCHING */
@keyframes wrench {
0%{transform:rotate(-12deg)}
8%{transform:rotate(12deg)}
10%{transform:rotate(24deg)}
18%{transform:rotate(-24deg)}
20%{transform:rotate(-24deg)}
28%{transform:rotate(24deg)}
30%{transform:rotate(24deg)}
38%{transform:rotate(-24deg)}
40%{transform:rotate(-24deg)}
48%{transform:rotate(24deg)}
50%{transform:rotate(24deg)}
58%{transform:rotate(-24deg)}
60%{transform:rotate(-24deg)}
68%{transform:rotate(24deg)}
75%,100%{transform:rotate(0deg)}
}
.faa-wrench.animated,
.faa-wrench.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-wrench {
animation: wrench 2.5s ease infinite;
transform-origin-x: 90%;
transform-origin-y: 35%;
transform-origin-z: initial;
}
.faa-wrench.animated.faa-fast,
.faa-wrench.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-wrench.faa-fast {
animation: wrench 1.2s ease infinite;
}
.faa-wrench.animated.faa-slow,
.faa-wrench.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-wrench.faa-slow {
animation: wrench 3.7s ease infinite;
}
/* BELL */
@keyframes ring {
0%{transform:rotate(-15deg)}
2%{transform:rotate(15deg)}
4%{transform:rotate(-18deg)}
6%{transform:rotate(18deg)}
8%{transform:rotate(-22deg)}
10%{transform:rotate(22deg)}
12%{transform:rotate(-18deg)}
14%{transform:rotate(18deg)}
16%{transform:rotate(-12deg)}
18%{transform:rotate(12deg)}
20%,100%{transform:rotate(0deg)}
}
.faa-ring.animated,
.faa-ring.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-ring {
animation: ring 2s ease infinite;
transform-origin-x: 50%;
transform-origin-y: 0px;
transform-origin-z: initial;
}
.faa-ring.animated.faa-fast,
.faa-ring.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-ring.faa-fast {
animation: ring 1s ease infinite;
}
.faa-ring.animated.faa-slow,
.faa-ring.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-ring.faa-slow {
animation: ring 3s ease infinite;
}
/* VERTICAL */
@keyframes vertical {
0%{transform:translate(0,-3px)}
4%{transform:translate(0,3px)}
8%{transform:translate(0,-3px)}
12%{transform:translate(0,3px)}
16%{transform:translate(0,-3px)}
20%{transform:translate(0,3px)}
22%,100%{transform:translate(0,0)}
}
.faa-vertical.animated,
.faa-vertical.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-vertical {
animation: vertical 2s ease infinite;
}
.faa-vertical.animated.faa-fast,
.faa-vertical.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-vertical.faa-fast {
animation: vertical 1s ease infinite;
}
.faa-vertical.animated.faa-slow,
.faa-vertical.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-vertical.faa-slow {
animation: vertical 4s ease infinite;
}
/* HORIZONTAL */
@keyframes horizontal {
0%{transform:translate(0,0)}
6%{transform:translate(5px,0)}
12%{transform:translate(0,0)}
18%{transform:translate(5px,0)}
24%{transform:translate(0,0)}
30%{transform:translate(5px,0)}
36%,100%{transform:translate(0,0)}
}
.faa-horizontal.animated,
.faa-horizontal.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-horizontal {
animation: horizontal 2s ease infinite;
}
.faa-horizontal.animated.faa-fast,
.faa-horizontal.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-horizontal.faa-fast {
animation: horizontal 1s ease infinite;
}
.faa-horizontal.animated.faa-slow,
.faa-horizontal.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-horizontal.faa-slow {
animation: horizontal 3s ease infinite;
}
/* FLASHING */
@keyframes flash {
0%,100%,50%{opacity:1}
25%,75%{opacity:0}
}
.faa-flash.animated,
.faa-flash.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-flash {
animation: flash 2s ease infinite;
}
.faa-flash.animated.faa-fast,
.faa-flash.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-flash.faa-fast {
animation: flash 1s ease infinite;
}
.faa-flash.animated.faa-slow,
.faa-flash.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-flash.faa-slow {
animation: flash 3s ease infinite;
}
/* BOUNCE */
@keyframes bounce {
0%,10%,20%,50%,80%,100%{transform:translateY(0)}
40%{transform:translateY(-15px)}
60%{transform:translateY(-15px)}
}
.faa-bounce.animated,
.faa-bounce.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-bounce {
animation: bounce 2s ease infinite;
}
.faa-bounce.animated.faa-fast,
.faa-bounce.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-bounce.faa-fast {
animation: bounce 1s ease infinite;
}
.faa-bounce.animated.faa-slow,
.faa-bounce.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-bounce.faa-slow {
animation: bounce 3s ease infinite;
}
/* SPIN */
@keyframes spin{
0%{transform:rotate(0deg)}
100%{transform:rotate(359deg)}
}
.faa-spin.animated,
.faa-spin.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-spin {
animation: spin 1.5s linear infinite;
}
.faa-spin.animated.faa-fast,
.faa-spin.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-spin.faa-fast {
animation: spin 0.7s linear infinite;
}
.faa-spin.animated.faa-slow,
.faa-spin.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-spin.faa-slow {
animation: spin 2.2s linear infinite;
}
/* FLOAT */
@keyframes float{
0%{transform: translateY(0)}
50%{transform: translateY(-6px)}
100%{transform: translateY(0)}
}
.faa-float.animated,
.faa-float.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-float {
animation: float 2s linear infinite;
}
.faa-float.animated.faa-fast,
.faa-float.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-float.faa-fast {
animation: float 1s linear infinite;
}
.faa-float.animated.faa-slow,
.faa-float.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-float.faa-slow {
animation: float 3s linear infinite;
}
/* PULSE */
@keyframes pulse {
0% {transform: scale(1.1)}
50% {transform: scale(0.8)}
100% {transform: scale(1.1)}
}
.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
animation: pulse 2s linear infinite;
}
.faa-pulse.animated.faa-fast,
.faa-pulse.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-pulse.faa-fast {
animation: pulse 1s linear infinite;
}
.faa-pulse.animated.faa-slow,
.faa-pulse.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-pulse.faa-slow {
animation: pulse 3s linear infinite;
}
/* SHAKE */
.faa-shake.animated,
.faa-shake.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-shake {
animation: wrench 2.5s ease infinite;
}
.faa-shake.animated.faa-fast,
.faa-shake.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-shake.faa-fast {
animation: wrench 1.2s ease infinite;
}
.faa-shake.animated.faa-slow,
.faa-shake.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-shake.faa-slow {
animation: wrench 3.7s ease infinite;
}
/* TADA */
@keyframes tada {
0% {transform: scale(1)}
10%,20% {transform:scale(.9) rotate(-8deg);}
30%,50%,70% {transform:scale(1.3) rotate(8deg)}
40%,60% {transform:scale(1.3) rotate(-8deg)}
80%,100% {transform:scale(1) rotate(0)}
}
.faa-tada.animated,
.faa-tada.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-tada {
animation: tada 2s linear infinite;
}
.faa-tada.animated.faa-fast,
.faa-tada.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-tada.faa-fast {
animation: tada 1s linear infinite;
}
.faa-tada.animated.faa-slow,
.faa-tada.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-tada.faa-slow {
animation: tada 3s linear infinite;
}
/* PASSING */
@keyframes passing {
0% {transform:translateX(-50%); opacity:0}
50% {transform:translateX(0%); opacity:1}
100% {transform:translateX(50%); opacity:0}
}
.faa-passing.animated,
.faa-passing.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-passing {
animation: passing 2s linear infinite;
}
.faa-passing.animated.faa-fast,
.faa-passing.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-passing.faa-fast {
animation: passing 1s linear infinite;
}
.faa-passing.animated.faa-slow,
.faa-passing.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-passing.faa-slow {
animation: passing 3s linear infinite;
}
/* PASSING REVERSE */
@keyframes passing-reverse {
0% {transform:translateX(50%); opacity:0}
50% {transform:translateX(0%); opacity:1}
100% {transform:translateX(-50%); opacity:0}
}
.faa-passing-reverse.animated,
.faa-passing-reverse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-passing-reverse {
animation: passing-reverse 2s linear infinite;
}
.faa-passing-reverse.animated.faa-fast,
.faa-passing-reverse.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast {
animation: passing-reverse 1s linear infinite;
}
.faa-passing-reverse.animated.faa-slow,
.faa-passing-reverse.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow {
animation: passing-reverse 3s linear infinite;
}
/* WAVE */
@keyframes burst {
0% {opacity:.6}
50% {transform:scale(1.8);opacity:0}
100%{opacity:0}
}
.faa-burst.animated,
.faa-burst.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-burst {
animation: burst 2s infinite linear
}
.faa-burst.animated.faa-fast,
.faa-burst.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-burst.faa-fast {
animation: burst 1s infinite linear
}
.faa-burst.animated.faa-slow,
.faa-burst.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-burst.faa-slow {
animation: burst 3s infinite linear
}
$(function(){$('[data-toggle="popover"]').popover()});
