FlandreScarle7/font-awesome-animation
1
0
Fork 0
mirror of https://github.com/l-lin/font-awesome-animation.git synced 2025-01-14 17:20:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add faa-burst

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
demo/partials/usage.html
View File

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

44
dist/font-awesome-animation.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/font-awesome-animation.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
index.html
View File

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

12
src/font-awesome-animation.css
View File

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