Add faa-burst

This commit is contained in:
l-lin 2014-08-17 20:11:12 +02:00
parent eb157dc955
commit ea9d608b03
5 changed files with 77 additions and 3 deletions

View File

@ -263,5 +263,25 @@
</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 animation-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>
<div class="clear"></div>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,7 @@
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/monokai.css">
<link rel="stylesheet" href="dist/font-awesome-animation.min.css">
<link rel="stylesheet" href="dist/font-awesome-animation.css">
</head>
<body ng-app="fontAwesomeAnimationDemoApp">
<div class="github-ribbon">

View File

@ -172,3 +172,15 @@
.faa-parent.animated-hover:hover > .faa-passing {
animation: passing 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 3s infinite linear
}