Simple animations using FontAwesome and some CSS3

download full view details view
gravatar
CSS 2/3, font-awesome-animation
Snippet by Anon
6782 0
HTML 
<div class="container demo ng-scope">
    <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>
                &nbsp;faa-wrench animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-wrench faa-wrench animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-ring animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-bell faa-ring animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-horizontal animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-envelope faa-horizontal animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-vertical animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-flash animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-warning faa-flash animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-bounce animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-spin animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-spinner faa-spin animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-float animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-plane faa-float animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-pulse animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-heart faa-pulse animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-shake animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-envelope faa-shake animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-tada animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-trophy faa-tada animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-passing animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-space-shuttle faa-passing animated-hover"></i>
                &nbsp;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>
                &nbsp;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>
                &nbsp;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>
                &nbsp;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>
                &nbsp;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>
                &nbsp;faa-burst animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-circle-o faa-burst animated-hover"></i>
                &nbsp;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>
                &nbsp;faa-burst
            </a>
        </div>
    </div>
    <div class="col-md-12">
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-star-o faa-falling animated"></i>
                &nbsp;faa-falling animated
            </a>
        </div>
        <div class="col-md-4">
            <a href="#">
                <i class="fa fa-star-o faa-falling animated-hover"></i>
                &nbsp;faa-falling animated-hover
            </a>
        </div>
        <div class="col-md-4">
            <a href="#" class="faa-parent animated-hover">
                <i class="fa fa-star-o faa-falling"></i>
                &nbsp;faa-falling
            </a>
        </div>
    </div>
</div>
CSS
{ } JS 

            

        

    

    

        

            
 Preview