.icon-animated-bell {
  display: inline-block;
  -moz-animation: ringing 2.0s 5 ease 1.0s;
  -ms-animation: ringing 2.0s 5 ease 1.0s;
  -webkit-animation: ringing 2.0s 5 ease 1.0s;
  animation: ringing 2.0s 5 ease 1.0s;
  
  -moz-transform-origin:50% 0%;
  -webkit-transform-origin:50% 0%;
  -ms-transform-origin:50% 0%;
  transform-origin:50% 0%;

}

@-moz-keyframes ringing {
  0% { -moz-transform: rotate(-15deg);}
  2% { -moz-transform: rotate(15deg);}
  4% { -moz-transform: rotate(-18deg);}
  6% { -moz-transform: rotate(18deg);}
  8% { -moz-transform: rotate(-22deg);}
  10% { -moz-transform: rotate(22deg);}
  12% { -moz-transform: rotate(-18deg);}
  14% { -moz-transform: rotate(18deg);}
  16% { -moz-transform: rotate(-12deg);}
  18% { -moz-transform: rotate(12deg);}
  20% { -moz-transform: rotate(0deg);}
}

@-webkit-keyframes ringing {
  0% { -webkit-transform: rotate(-15deg);}
  2% { -webkit-transform: rotate(15deg);}
  4% { -webkit-transform: rotate(-18deg);}
  6% { -webkit-transform: rotate(18deg);}
  8% { -webkit-transform: rotate(-22deg);}
  10% { -webkit-transform: rotate(22deg);}
  12% { -webkit-transform: rotate(-18deg);}
  14% { -webkit-transform: rotate(18deg);}
  16% { -webkit-transform: rotate(-12deg);}
  18% { -webkit-transform: rotate(12deg);}
  20% { -webkit-transform: rotate(0deg);}
}

@-ms-keyframes ringing {
  0% { -ms-transform: rotate(-15deg);}
  2% { -ms-transform: rotate(15deg);}
  4% { -ms-transform: rotate(-18deg);}
  6% { -ms-transform: rotate(18deg);}
  8% { -ms-transform: rotate(-22deg);}
  10% { -ms-transform: rotate(22deg);}
  12% { -ms-transform: rotate(-18deg);}
  14% { -ms-transform: rotate(18deg);}
  16% { -ms-transform: rotate(-12deg);}
  18% { -ms-transform: rotate(12deg);}
  20% { -ms-transform: rotate(0deg);}
}

@keyframes ringing {
  0% { transform: rotate(-15deg);}
  2% { transform: rotate(15deg);}
  4% { transform: rotate(-18deg);}
  6% { transform: rotate(18deg);}
  8% { transform: rotate(-22deg);}
  10% { transform: rotate(22deg);}
  12% { transform: rotate(-18deg);}
  14% { transform: rotate(18deg);}
  16% { transform: rotate(-12deg);}
  18% { transform: rotate(12deg);}
  20% { transform: rotate(0deg);}
}



.icon-animated-vertical  {
  display: inline-block;
  -moz-animation: vertical 2.0s 5 ease 2.0s;
  -ms-animation: vertical 2.0s 5 ease 2.0s;
  -webkit-animation: vertical 2.0s 5 ease 2.0s;
  animation: vertical 2.0s 5 ease 2.0s;
}

@-moz-keyframes vertical {
  0% { -moz-transform: translate(0,-3px);}
  4% { -moz-transform: translate(0,3px);}
  8% { -moz-transform: translate(0,-3px);}
  12% { -moz-transform: translate(0,3px);}
  16% { -moz-transform: translate(0,-3px);}
  20% { -moz-transform: translate(0,3px);}
  22% { -moz-transform: translate(0,0);}
}
@-webkit-keyframes vertical {
  0% { -webkit-transform: translate(0,-3px);}
  4% { -webkit-transform: translate(0,3px);}
  8% { -webkit-transform: translate(0,-3px);}
  12% { -webkit-transform: translate(0,3px);}
  16% { -webkit-transform: translate(0,-3px);}
  20% { -webkit-transform: translate(0,3px);}
  22% { -webkit-transform: translate(0,0);}
}
@-ms-keyframes vertical {
  0% { -ms-transform: translate(0,-3px);}
  4% { -ms-transform: translate(0,3px);}
  8% { -ms-transform: translate(0,-3px);}
  12% { -ms-transform: translate(0,3px);}
  16% { -ms-transform: translate(0,-3px);}
  20% { -ms-transform: translate(0,3px);}
  22% { -ms-transform: translate(0,0);}
}
@keyframes vertical {
  0% { transform: translate(0,-3px);}
  4% { transform: translate(0,3px);}
  8% { transform: translate(0,-3px);}
  12% { transform: translate(0,3px);}
  16% { transform: translate(0,-3px);}
  20% { transform: translate(0,3px);}
  22% { transform: translate(0,0);}
}