"Animated Brand in Navbar"
Bootstrap 3.3.0 Snippet by vijaysasavadiya

<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()});

Related: See More


Questions / Comments:

Awesome... Thanks..

HakerTag () - 6 years ago - Reply 0