<div class="footicon">
<a href="javascript:;" data-toggle="tooltip" title="" data-original-title="Add to bookmark">
<div id="bookmark" class="bookmark-img-animation primary_ribbon" data-id="31630">
<div class="halim-pulse-ring"></div>
</div>
</a>
</div>
**** CSS
.primary_ribbon {
background: url(../images/title_overview_sprite.png) no-repeat;
width: 40px;
height: 58px;
background-position: -8px -66px;
}
.bookmark-img-animation {
-webkit-animation: halim-bookmark-img-animation 1s infinite ease-in-out;
animation: halim-bookmark-img-animation 1.8s infinite ease-in-out;
}
.halim-pulse-ring {
position: absolute;
left: -12px;
top: -12px;
display: block;
background: 0 0;
width: 64px;
height: 64px;
border: 4px solid #fff;
opacity: 0;
z-index: 100;
/* pointer-events: none; */
/* -webkit-border-radius: 50%; */
/* -webkit-background-clip: padding-box; */
-moz-border-radius: 50%;
-moz-background-clip: padding;
border-radius: 50%;
/* background-clip: padding-box; */
/* -webkit-animation: halim-pulse 2s cubic-bezier(.4,0,.29,.9) infinite; */
-moz-animation: halim-pulse 2s cubic-bezier(.4,0,.29,.9) infinite;
-o-animation: halim-pulse 2s cubic-bezier(.4,0,.29,.9) infinite;
animation: halim-pulse 2s cubic-bezier(.4,0,.29,.9) infinite;
}
.halim-pulse-ring{
position:absolute;
left:-12px;
top:-12px;
display:block;
background:0 0;
width:64px;
height:64px;
border:4px solid #fff;
opacity:0;
z-index:100;
pointer-events:none;
-webkit-border-radius:50%;
-webkit-background-clip:padding-box;
-moz-border-radius:50%;
-moz-background-clip:padding;
border-radius:50%;
background-clip:padding-box;
-webkit-animation:halim-pulse 2s cubic-bezier(.4,0,.29,.9) infinite;
-moz-animation:halim-pulse 2s cubic-bezier(.4,0,.29,.9) infinite;
-o-animation:halim-pulse 2s cubic-bezier(.4,0,.29,.9) infinite;
animation:halim-pulse 2s cubic-bezier(.4,0,.29,.9) infinite
}
@-moz-keyframes halim-pulse{
0%{
-moz-transform:scale(0);
-ms-transform:scale(0);
-webkit-transform:scale(0);
transform:scale(0);
opacity:0
}
25%{
-moz-transform:scale(0);
-ms-transform:scale(0);
-webkit-transform:scale(0);
transform:scale(0);
opacity:.3
}
50%{
-moz-transform:scale(.2);
-ms-transform:scale(.2);
-webkit-transform:scale(.2);
transform:scale(.2);
opacity:.5
}
75%{
-moz-transform:scale(.6);
-ms-transform:scale(.6);
-webkit-transform:scale(.6);
transform:scale(.6);
opacity:.7
}
100%{
-moz-transform:scale(1);
-ms-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1);
opacity:0
}
}
@-ms-keyframes halim-pulse{
0%{
-moz-transform:scale(0);
-ms-transform:scale(0);
-webkit-transform:scale(0);
transform:scale(0);
opacity:0
}
25%{
-moz-transform:scale(0);
-ms-transform:scale(0);
-webkit-transform:scale(0);
transform:scale(0);
opacity:.3
}
50%{
-moz-transform:scale(.2);
-ms-transform:scale(.2);
-webkit-transform:scale(.2);
transform:scale(.2);
opacity:.5
}
75%{
-moz-transform:scale(.6);
-ms-transform:scale(.6);
-webkit-transform:scale(.6);
transform:scale(.6);
opacity:.7
}
100%{
-moz-transform:scale(1);
-ms-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1);
opacity:0
}
}
@-o-keyframes halim-pulse{
0%{
-moz-transform:scale(0);
-ms-transform:scale(0);
-webkit-transform:scale(0);
transform:scale(0);
opacity:0
}
25%{
-moz-transform:scale(0);
-ms-transform:scale(0);
-webkit-transform:scale(0);
transform:scale(0);
opacity:.3
}
50%{
-moz-transform:scale(.2);
-ms-transform:scale(.2);
-webkit-transform:scale(.2);
transform:scale(.2);
opacity:.5
}
75%{
-moz-transform:scale(.6);
-ms-transform:scale(.6);
-webkit-transform:scale(.6);
transform:scale(.6);
opacity:.7
}
100%{
-moz-transform:scale(1);
-ms-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1);
opacity:0
}
}
@-webkit-keyframes halim-pulse{
0%{
-moz-transform:scale(0);
-ms-transform:scale(0);
-webkit-transform:scale(0);
transform:scale(0);
opacity:0
}
25%{
-moz-transform:scale(0);
-ms-transform:scale(0);
-webkit-transform:scale(0);
transform:scale(0);
opacity:.3
}
50%{
-moz-transform:scale(.2);
-ms-transform:scale(.2);
-webkit-transform:scale(.2);
transform:scale(.2);
opacity:.5
}
75%{
-moz-transform:scale(.6);
-ms-transform:scale(.6);
-webkit-transform:scale(.6);
transform:scale(.6);
opacity:.7
}
100%{
-moz-transform:scale(1);
-ms-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1);
opacity:0
}
}
@keyframes halim-pulse{
0%{
-moz-transform:scale(0);
-ms-transform:scale(0);
-webkit-transform:scale(0);
transform:scale(0);
opacity:0
}
25%{
-moz-transform:scale(0);
-ms-transform:scale(0);
-webkit-transform:scale(0);
transform:scale(0);
opacity:.3
}
50%{
-moz-transform:scale(.2);
-ms-transform:scale(.2);
-webkit-transform:scale(.2);
transform:scale(.2);
opacity:.5
}
75%{
-moz-transform:scale(.6);
-ms-transform:scale(.6);
-webkit-transform:scale(.6);
transform:scale(.6);
opacity:.7
}
100%{
-moz-transform:scale(1);
-ms-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1);
opacity:0
}
}
@-webkit-keyframes pulse{
0%{
-webkit-transform:scale(0);
opacity:0
}
8%{
-webkit-transform:scale(0);
opacity:0
}
15%{
-webkit-transform:scale(.1);
opacity:1
}
30%{
-webkit-transform:scale(.5);
opacity:1
}
100%{
opacity:0;
-webkit-transform:scale(1)
}
}
@-moz-keyframes pulse{
0%{
-moz-transform:scale(0);
opacity:0
}
8%{
-moz-transform:scale(0);
opacity:0
}
15%{
-moz-transform:scale(.1);
opacity:1
}
30%{
-moz-transform:scale(.5);
opacity:1
}
100%{
opacity:0;
-moz-transform:scale(1)
}
}
@-webkit-keyframes halim-bookmark-animation{
0%{
-webkit-transform:rotate(0) scale(.5) skew(1deg);
-webkit-opacity:.1
}
30%{
-webkit-transform:rotate(0) scale(.7) skew(1deg);
-webkit-opacity:.5
}
100%{
-webkit-transform:rotate(0) scale(1) skew(1deg);
-webkit-opacity:.1
}
}
@-webkit-keyframes halim-bookmark-fill-animation{
0%{
-webkit-transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}
50%{
-webkit-transform:rotate(0) scale(1) skew(1deg);
opacity:.2
}
100%{
-webkit-transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}
}
@-webkit-keyframes halim-bookmark-img-animation{
0%{
-webkit-transform:rotate(0) scale(1) skew(1deg)
}
10%{
-webkit-transform:rotate(-5deg) scale(1) skew(1deg)
}
20%{
-webkit-transform:rotate(5deg) scale(1) skew(1deg)
}
30%{
-webkit-transform:rotate(-5deg) scale(1) skew(1deg)
}
40%{
-webkit-transform:rotate(5deg) scale(1) skew(1deg)
}
50%{
-webkit-transform:rotate(0) scale(1) skew(1deg)
}
100%{
-webkit-transform:rotate(0) scale(1) skew(1deg)
}
}
