Animation Ring Icon

 

**** HTML:

<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)

    }

}